Rollover on images Not working?

<a href="pages.html" ONMOUSEOVER=rollover.src="rollover.JPG" ONMOUSEOUT=rollover.src="images/style_one.JPG"><CENTER><IMG SRC="images/style_two.JPG" NAME="rollover"></CENTER></a>

 

Just a quick question: why are you not using css to handle your rollovers?

I think that maybe it isnt working because you dont have the first part pointed to the images folder but the others are...not sure as i do not do rollovers this way.

 

Not good at css, but what should be css coding here and let me try for multiple images. Appreciate!

 

<A href="index.html" onMouseOver="changeImg('imgHome',gifHome2)"
onMouseOut="changeImg('imgHome',gifHome)">
<IMG src="home.gif" border="0" name="imgHome">
</A>

<SCRIPT language="javascript1.1">
gifHome = new Image(54,18)
gifHome.src = "home.gif"
gifHome2 = new Image(54,18)
gifHome2.src = "home2.gif"

function changeImg(cImg,ref) {
document.images[cImg].src = ref.src
}
</SCRIPT>

 

karthimx:

It's not yet clear to me. This is how I have done it, not working. (Total 5 images to rollover)

<SCRIPT language="javascript1.1">
JPGHome = new Image(54,18)
JPGHome.src = "home.JPG"
JPGHome5 = new Image(54,18)
JPGHome5.src = "home5.JPG"

function changeImg(cImg,ref) {
document.images[cImg].src = ref.src
}
</SCRIPT>


<A href="index.html" onMouseOver="changeImg('imgHome',JPGHome2)"
onMouseOut="changeImg('imgHome',JPGHome)">
<IMG src="images/style_one.JPG" border="0" name="imgHome1">
<IMG src="images/style_two.JPG" border="0" name="imgHome2">
<IMG src="images/style_three.JPG" border="0" name="imgHome3">
<IMG src="images/style_four.JPG" border="0" name="imgHome4">
<IMG src="images/style_five.JPG" border="0" name="imgHome5">
</A>

 

Example of a rollover effect in navigation:

Html Code:

			<div id="navi">
				<ul>
					<li><a href="#" id="home" class="btn" title="Home"></a></li>

					<li><a href="#" id="service" class="btn" title="service"></a></li>
					<li><a href="#" id="products" class="btn" title="products"></a></li>
					<li><a href="#" id="contact" class="btn" title="Contact Us"></a></li>
				</ul>
			</div>

Code (markup):

The CSS Code

   #navi {
  background-image :url("images/navigation_background.png");
  float : left;
  height : 139px;
  margin : 7px 0px 0px 11px;
  width : 929px;
}

 #navi ul {
  height :108px;
  margin : 13px 4px 6px -39px;
}

 #navi li {
  display : block;
  float :left;
  height :108px;
  width :25%;
}

 #navi .btn {
  background-position :center center;
  background-repeat :no-repeat;
  display :block;
  height :100%;
  margin :0 auto;
}

 #home {
  background : url("images/btn_home_current.png");
  height : 108px;
  width : 197px;
}

 #service {
  background : url("images/btn_services_normal.png");
  height : 108px;
  width : 197px;
}

 #service:hover {
  background : url("images/btn_service_hover.png");
  height : 108px;
  width : 197px;
}

 #products {
  background : url("images/btn_product_normal.png");
  height : 108px;
  width : 197px;
}

 #products:hover {
  background : url("images/btn_products_hover.png");
  height : 108px;
  width : 197px;
}

 #contact {
  background : url("images/btn_contact_us_default.png");
  height : 108px;
  width : 197px;
}

 #contact:hover {
  background : url("images/btn_contact_us_hover.png");
  height : 108px;
  width : 197px;
}

Code (markup):

 

css/html coding means I have to create 20-30 url pages for each image to show as <a href="#".
I guess java script/html suggested by karthimx above seems more plausible. I inserted my own images posted by Karthimx but i am not sure where is the error now.

 

check this link for soluition
http://amitdesigner87.blogspot.com/2011/06/image-rollover-image-change.html