7 Replies - 7011 Views - Last Post: 17 March 2012 - 06:58 AM

#1 Okysho  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 96
  • Joined: 09-February 11

Mouse rollover, image switching not working

Posted 16 March 2012 - 07:58 AM

Hey guys, I'm working on a web project where I have images that switch with an on-mouseover in the menu. In addition to this, I want to switch another image on the page when that same even occurs.

Essentially, I'm trying to recreate this:
http://137.207.192.1...ctice/menu.html
(Above source is from my university course and is free for me to use)

I've tried doing it myself, and I've tried copy-pasting, and while I can get the menu image to change in both attempts, I can't got the extra image (on the far right in the above example) to work.

I can't access my FTP server right now for some reason, so here's my HTML current code and corresponding javascript.


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="MenuTitles.js" language="javascript" type="text/javascript" ></script> 
<title>My Fabulous Website</title>
</head>
<body>

<div id="Container">
	<div id="banner">
    	<p>Look Look I'm an image!!</p>
    </div>
    <div id="menu">
    <a href="Index.html"><img src="Tacticalmarine.jpeg" alt="Home" height="32" width="32" name="Home" onmouseover="enterM(0,this)" onmouseout="exitM(0,this)"/></a>
    <a href="About.html"><img src="Assaultmarine.jpg" alt="About" height="32" width="32" name="About" onmouseover="enterM(1,this)" onmouseout="exitM(1,this)"/></a>
    <a href="Administrations.html"><img src="Sternguardmarine.jpg" alt="Administration" height="32" width="32" name="Administrations" onmouseover="enterM(2,this)" onmouseout="exitM(2,this)"/></a>
    <a href="Campaigns.html"><img src="Vanguardmarine.jpg" alt="Campaigns" height="32" width="32" name="Campaigns" onmouseover="enterM(3,this)" onmouseout="exitM(3,this)"/></a>
  
  	<div id="menuText">
   <img id="image" src="scout.jpg" width="32" height="32"></div>
    </div>
    </div>
    <div id="Main_frame">
    <div id="main">
    	<h1 align="center"> I'm a heading!!!</h1>
		<p>Weeeeee!!! I have stuff!!!</p>
	
	</div>
    </div>
</div>

</body>
</html>



CSS:
body {
background-color:  white;
}
 
#Container {
    margin: 0 auto;
    width: 1050px;
    margin-top: 2%;
    height:100%;
}

#banner {
    background-color: #000000;
    margin: 0 auto;
    width: 1000px;
    height:100px;
}

#menu {
    background-color: #000000;
    margin: 0 auto;
	margin-top:15px;
	margin-bottom:15px;
    width: 1000px;
    height:100px;
}

#menuText{
	width:100px;
	height:50px;
	margin-left:auto;
	margin-right:auto;
}
 
 #Main_frame {
    background-color: #555555;
    border-color: #000000;
	padding-top:10px;
	padding-bottom:25px;
    margin: 0 auto;
    width: 1050px;
    height:100%;
}
 
#main {
    background-color: #000000;

    margin: 0 auto;
    width: 1000px;
    height:400px;
}
 
p {  
color: white; 
}
 
h1{
color: red; 
}



Javascript:
var descriptions = [
  "This is the first item in the menu.  Enter at your own risk!",
  "News goes here.  Actually, it's the same file",
  "Third link in the menu",
  "Fourth link in the menu.  Cut and paste is good.",
  "Still going, but this is the last one."
  ];
var Mimages = new Array();
  Mimages[0] = new Image();
  Mimages[0].src = "Tacticalmarine.jpeg";
  Mimages[1] = new Image();
  Mimages[1].src = "Assaultmarine.jpg";
  Mimages[2] = new Image();
  Mimages[2].src = "Sternguardmarine.jpg";
  Mimages[3] = new Image();
  Mimages[3].src = "Vanguardmarine.jpg";
  Mimages[4] = new Image();
  Mimages[4].src = "Terminatormarine.jpg";

var Oimages = new Array();
  Oimages[0] = new Image();
  Oimages[0].src = "scout.jpg";
  Oimages[1] = new Image();
  Oimages[1].src = "scout.jpg";
  Oimages[2] = new Image();
  Oimages[2].src = "scout.jpg";
  Oimages[3] = new Image();
  Oimages[3].src = "scout.jpg";
  Oimages[4] = new Image();
  Oimages[4].src = "scout.jpg";

function enterM(idx,target) {
  target.src = Oimages[idx].src;
  document.getElementById("info").innerHTML = descriptions[idx];
  document.getElementById("image").src="landscape.jpg";
  }

function exitM(idx,target) {
  target.src = Mimages[idx].src;
  document.getElementById("info").innerHTML = "Info goes here";
  
  }



The thing is, I honestly can't even figure out where the error is occurring. I've tried moving stuff around, changing names, checking spelling, all the debugs I can think of. I don't THINK the CSS is causing any errors, but I posted it just in case it is.

Thanks in advance. I'm lost.

Is This A Good Question/Topic? 0
  • +

Replies To: Mouse rollover, image switching not working

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,257
  • Joined: 08-June 10

Re: Mouse rollover, image switching not working

Posted 16 March 2012 - 01:45 PM

thereís no element with the ID "info", and there is the Error Console.

and I also donít understand why you create images (Oimage, Mimage), when all you need is the src URI.
Was This Post Helpful? 0
  • +
  • -

#3 Okysho  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 96
  • Joined: 09-February 11

Re: Mouse rollover, image switching not working

Posted 16 March 2012 - 07:48 PM

I know there's not "info" ID That's just remnants of my copy-paste attempt. I noticed that that did show up in the error console, but nothing concerning why my image isn't changing. the "info" ID isn't linked to any image swaps, so it's irrelevant.

The Mimage and Oimage are dummy images for now hence why all the Oimage's are the same.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,257
  • Joined: 08-June 10

Re: Mouse rollover, image switching not working

Posted 17 March 2012 - 02:59 AM

View PostOkysho, on 17 March 2012 - 03:48 AM, said:

I know there's not "info" ID That's just remnants of my copy-paste attempt. I noticed that that did show up in the error console, but nothing concerning why my image isn't changing. the "info" ID isn't linked to any image swaps, so it's irrelevant.

but you are aware that Javascript stops processing when there is an error (and setting a property to null is an error)


View PostOkysho, on 17 March 2012 - 03:48 AM, said:

The Mimage and Oimage are dummy images for now hence why all the Oimage's are the same.

thatís not what I meant. I was wondering why you create image objects when all you need is a bit of text.
Was This Post Helpful? 1
  • +
  • -

#5 Okysho  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 96
  • Joined: 09-February 11

Re: Mouse rollover, image switching not working

Posted 17 March 2012 - 06:31 AM

No I wasn't aware Javascript stopped processing after encountering an error. I assumed it worked like HTML/CSS and the error section was ignored or skipped.

While I do know that in javascript, when compared to other languages does not need general variable declaration, because an image is a special object with it's own properties it needed to be declared in order to access those properties.

Also is this not how images are pre-loaded? This is simply the way I was taught to do it.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,257
  • Joined: 08-June 10

Re: Mouse rollover, image switching not working

Posted 17 March 2012 - 06:39 AM

View PostOkysho, on 17 March 2012 - 02:31 PM, said:

While I do know that in javascript, when compared to other languages does not need general variable declaration, because an image is a special object with it's own properties it needed to be declared in order to access those properties.

I donít need special objects to assign a new URI to the imageís src property.
var imgsrc = ["image1.jpg", "img02.jpg", "image03.jpeg"];
document.getElementById("image").src = imgsrc[i];


btw, donít make the mistake to think that JS doesnít need proper variable declarations. you can get all kinds of side effects (related to Scope) if you donít.

View PostOkysho, on 17 March 2012 - 02:31 PM, said:

Also is this not how images are pre-loaded? This is simply the way I was taught to do it.

image preloading may be the only reason to create an image array. but personally I prefer image sprites for rollover images. (it doesnít even need Javascript to work)
Was This Post Helpful? 0
  • +
  • -

#7 Okysho  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 96
  • Joined: 09-February 11

Re: Mouse rollover, image switching not working

Posted 17 March 2012 - 06:50 AM

Ah yes, well scope is a bit different than primitive data types and I do know that scope matters in Javascript.

Thanks for bringing that up about the images, again this is how I was taught. Good to know that I don't have to declare a new object for every image ever. Very handy.

I personally have never used image sprites, but I have seen how effective they can be. For this project however things need to be done without the use of image sprites. I could easily throw in some nice fade effects with jquery and do a lot more to spruce up the effects, however I'm limited by project details.
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,257
  • Joined: 08-June 10

Re: Mouse rollover, image switching not working

Posted 17 March 2012 - 06:58 AM

and considering todayís bandwidth, image preloading is not really necessary for small images as often used for rollovers.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1