...

View Full Version : Mouse over ploblem



Milox
10-04-2011, 11:30 PM
I wrote this code for 1 image, and it is working perfectly fine:



function swapImage()

{
document.getElementById("linkedin").src = "images/glinkedin.png";
}

function restoreImage()

{
document.getElementById("linkedin").src = "images/linkedin.png";
}


the problem starts when I want to use this code for 4 images, can anyone correct it please:



function swapImage()

{
document.getElementById("linkedin").src = "images/glinkedin.png";
}


{
document.getElementById("facebook").src = "images/gfacebook.png";
}


{
document.getElementById("google").src = "images/ggoogle.png";
}


{
document.getElementById("twitter").src = "images/gtwitter.png";
}

function restoreImage()

{
document.getElementById("linkedin").src = "images/linkedin.png";
}

{
document.getElementById("facebook").src = "images/facebook.png";
}

{
document.getElementById("google").src = "images/google.png";
}

{
document.getElementById("twitter").src = "images/twitter.png";
}

rangana
10-04-2011, 11:50 PM
You have so much brackets going on there. This should work:


function swapImage() {
document.getElementById("linkedin").src = "images/glinkedin.png";
document.getElementById("facebook").src = "images/gfacebook.png";
document.getElementById("google").src = "images/ggoogle.png";
document.getElementById("twitter").src = "images/gtwitter.png";
}

function restoreImage() {
document.getElementById("linkedin").src = "images/linkedin.png";
document.getElementById("facebook").src = "images/facebook.png";
document.getElementById("google").src = "images/google.png";
document.getElementById("twitter").src = "images/twitter.png";
}

rangana
10-05-2011, 12:01 AM
Alternatively, you might want to use this instead:


function swapImage(imgBase, ids_imgs) {
for(var i in ids_imgs)
document.getElementById(i).src = imgBase.imgBase+ids_imgs[i];
}

function restoreImage(imgBase, ids_imgs) {
for(var i in ids_imgs)
document.getElementById(i).src = imgBase.imgBase+ids_imgs[i];
}


For Usage:


/***
// swapImage(@argument1, @argument2)
// @argument1 - base directory of the images
// @argument2 - pass the element ID to change and the image's source
***/
swapImage({'imgBase':'images/'},{'linkedin':'glinkedin.png',
'facebook':'gfacebook.png',
'google':'ggoogle.png',
'twitter':'gtwitter.png'
});

/***
// restoreImage(@argument1, @argument2)
// @argument1 - base directory of the images
// @argument2 - pass the element ID to change and the image's source
***/
restoreImage({'imgBase':'images/'},{'linkedin':'linkedin.png',
'facebook':'facebook.png',
'google':'google.png',
'twitter':'twitter.png'
});



Hope that helps.

Milox
10-05-2011, 12:39 AM
thx, I did it before without so many brackets but the problem is that I want to use every image separately not all of them at the same time. In other words when I hover over one image I want it to change for another one; and other 3 will stay the same. I only want to change the image I hover.

rangana
10-05-2011, 01:03 AM
Use this script instead:


function swapImage(el,img_src) {
restoreImage(); // restore all images first
document.getElementById(el).src = img_src;
}

function restoreImage() {
var orig = {
'baseDir':'images/', // base dir of the images
'defaultImg': [ // set default images in format [ID , IMAGE_SOURCE]
['linkedin','linkedin.png'],['facebook','facebook.png'],
['google','google.png'],['twitter','twitter.png']
]
};

for(var i=0,o=orig.defaultImg;i<o.length;i++)
document.getElementById(o[i][0]).src = orig.baseDir + o[i][1];
}


...and when you call swapImage() function, use it like:
<a href="#" onclick="swapImage('google','images/ggoogle.png');">


Hope that helps.

Milox
10-05-2011, 01:20 AM
thx, but this is not what I wanted :( I want to work the same like menu on websites when you place your mouse over menu button it change color.
Besides I place my function call here:



<img border="0" src="images/google.png" alt="google" id ="google" onmouseover="swapImage()" onmouseout="restoreImage()" width="24" height="24" /></a>

Old Pedant
10-05-2011, 01:26 AM
Do it the *EASY* way. Stop working so hard!


<img border="0" src="images/google.png" alt="google"
onmouseover="this.src='images/ggoogle.png';"
onmouseout="this.src='images/google.png';"
width="24" height="24" />

Now you don't even need the id on your image.

Old Pedant
10-05-2011, 01:29 AM
If you really think you need to use a function:


<script>
function iover( image ) {
image.src = image.src.replace( "/", "/g" );
}
function iout(image) {
image.src = image.src.replace( "/g", "/" );
}
</script>
...
<img src="images/google.png" onmouseover="iover(this)" onmousout="iout(this)" .../>

But I don't see much advantage in that.

Milox
10-05-2011, 08:25 PM
thx, onmouseover works great :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum