Change image on rollover

**agk23** · 04-20-2010 05:36 PM

Hi,
I essentially have this code below and what I am trying to do is change the image when the mouse rolls over it but change it back when the mouse leaves. What am I doing wrong?

HTML Code:

<html>
<script type="text/javascript">
function ShowFlip(number)
{
document.getElementById( number ).innerHTML = '<img src="../events/1flip.jpg">';
}

function HideFlip(number)
{
document.getElementById( number ).innerHTML = '<img src="../events/1.jpg">';
}
</script>

<body>
<a id="1" style="cursor:default;" 
onMouseOver="ShowFlip('1');"
onMouseOut="HideFlip('1');">
<img src="../events/1.jpg">
</a>
</body>
</html>

I have also tried assigning the id to the image and came up with this code but it still doesn't change anything. Just shows the original image. Any help is appreciated! Thanks!

HTML Code:

<html>

<script type="text/javascript">
function ShowFlip(number)
{
document.getElementById('a').src = "../events/1flip.jpg";
}

function HideFlip(number)
{
document.getElementById('a').src = "../events/1.jpg";
}
</script>

<body>
<div>
	<img id="a" src="../events/1.jpg" onMouseOver="ShowFlip('a');"
	onMouseOut="HideFlip('a');">
</div>
</body>
</html>

**Fang** · 04-21-2010 01:17 AM

A different approach using css:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {margin:0;padding:0;}
#a1 {
display:block;
width:100px;
height:20px;
background:blue url(image1.jpg) no-repeat;
}
#a1:hover {
background:blue url(image2.jpg) no-repeat;
}
</style>

</head>
<body>
<div>
	<a href="index.htm" id="a1" title="foobar"></a>
</div>
</body>
</html>

A number id is invalid: http://www.w3.org/TR/html401/types.html#type-name

**tirna** · 04-21-2010 01:43 AM

You really need only 1 function to handle the image swapping.

Personally, I prefer to preload the images, especially if they are large, because using css :hover might not always give an instant image swap if the images are large and/or uncached.

Maybe use this as a template:

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
<!--

imgPaths = new Array();
imgPaths = ['pic1.jpg',
            'pic2.jpg'];
myImgs = new Array();
 
//preload the images
for(var i in imgPaths) {
    myImgs[i] = new Image();
    myImgs[i].src = imgPaths[i];
}
 
var picNum = 0;
function swapImg(elemId) {
    document.getElementById(elemId).src = myImgs[picNum].src;
    if(picNum == 1) {
        picNum = 0;   
    } else {
        picNum = 1;
    }
}
 
//-->
</script>

</head>
<body>

    <div>
        <img id="myPic" src="pic1.jpg" alt="myPic" onmouseover="swapImg(this.id);" onmouseout="swapImg(this.id);">
    </div>

</body>
</html>

**Kor** · 04-21-2010 03:37 AM

Well,hm... I have never trusted the preloader codes. After all, the new Image() constructor creates a javascript object, and it does not load the image into the browser's cache by all means. In theory it should, but the browsers' interpreters do not always follow the theory

I remember I have made once a simple test in IE6 and IE7. I have used new Image() to create the object but without displaying it, actually. I have checked the browser's cache (IE Temporary File) but no image was there

. maybe IE8 has bypassed this problem... I think I should check that again

**tirna** · 04-21-2010 04:37 AM

Preloaded images are stored locally, but whether it is in the browser's normal cache or elsewhere I don't know. I really don't care where they are stored locally.

In my experience, preloaded images definitely load virtually instaneously when called in some sort of animation (image swap, slideshow etc). With non preloaded images I sometimes notice a delay in the image appearing when called because the browser downloads it from the server rather than get it locally.

I currently support IE8, IE7, FF3.6, OP9, OP10, Safari (for Windows) and Chrome. In all these browsers preloaded images, especially large ones, load very much quicker than non preloaded images in my experience.

I will always preload images that will be used in some kind of animation. Images that are not used in animations, I may or may not preload depending on the circumstances.

For anyone interested, an interesting read on javascripts Image object.

http://articles.techrepublic.com.com...1-5214317.html

**Kor** · 04-21-2010 07:18 AM

Originally Posted by tirna

Preloaded images are stored locally, but whether it is in the browser's normal cache or elsewhere I don't know. I really don't care where they are stored locally.

You should care. If the images are not stored locally and the code uses absolute URL, some browsers will load the images again and again from the server. Which is exactly what we try to avoid

**tirna** · 04-21-2010 04:57 PM

Originally Posted by Kor

You should care........

I think you are miising the point I was making.

Preloading images using the Image object will result in the images being stored locally somewhere. Whether that is in the browser's default cache folder, some other local folder or even in RAM I do not care at all and I don't see why I need to care. For me, there are a lot more important things going on in our world at the moment to care about than where some browser is storing images

The intention behind my preloading images is to ensure they are located locally when they are called upon by a javascript.

Thread: Change image on rollover

Thread Tools

Display

Change image on rollover

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions