Why doesnt my simple javascript rollover work?

Question

Hi guys I have a simple rollover onmouseover effect, I have tried several scripts but none of them work, can anyone tell me why?`

javascript:

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
    homebuttonup = new Image();
    homebuttonup.src = "./images/gym-light.png";
    homebuttondown = new Image();
    homebuttondown.src = "./images/buttonright.png";
}

function buttondown(buttonname) {
    if (document.images) {
        document[buttonname].src = eval(buttonname + "down.src");
    }
}

function buttonup(buttonname) {
    if (document.images) {
        document[buttonname].src = eval(buttonname + "up.src");
    }
}
// -->
</script>

and link:

    <a href="index.html" onmouseover="buttondown('homebutton')"       onmouseout="buttonup('homebutton')">
  <img id='Img4Inner' name="homebutton" src='./images/gym-light.png' alt="" />

  </a>

Works fine here: http://jsfiddle.net/j08691/ETHaM/. Do you have other code that might be interfering? — j08691, Apr 18 '12 at 18:53
You may have already heard this, but use `eval` _very_ carefully. Some even argue that it should never be used. There are usually better ways to solve the problem. — benekastah, Apr 18 '12 at 19:02
I tried my code on jsfiddle and your right it does work on there.. but it doesnt work on my website any other reasons why it wouldnt? it is the little bike logo on viifit.com if you view source you would see that its in there.. — user1250526, Apr 18 '12 at 19:44
I tried installing firebug but I don't think I get any errors — user1250526, Apr 18 '12 at 19:52
http://jsfiddle.net/ETHaM/5/ I have tried it on here and it works.. but not in my index when I open it up from my directory or when I upload it on my host.. its live on viifit.com the image with the bike (icon green one) has that exact code connected to it - the link works but not the mouseover? — user1250526, Apr 18 '12 at 19:55
I think I realized the images are within a div, how would I access such div? is document.images wrong? — user1250526, Apr 18 '12 at 20:21

hanzolo · Accepted Answer · 2012-04-19T18:32:08.980

1

**UPDATE 2 (last one lol) ** you currently have the onmouseout and onmouseover on the a tag, move them to the image tag and it will work:

you're code:

<a onmouseout="buttonup('homebutton')" onmouseover="buttondown('homebutton')"        
href="http://www.[...].com" style="height:120px;width:100px;">
<img id="Img4Inner" alt="" src="http://[..].com/images/gym-light.png" name="homebutton">
</a>

Working code:

<a onmouseout="buttonup('homebutton')" onmouseover="buttondown('homebutton')"        
href="http://www.[...].com" style="height:120px;width:100px;">
 <img alt="" src="http://[...]/images/gym-light.png"  onmouseout="buttonup(this)" 
     onmouseover="buttondown(this)" name="homebutton" id="Img4Inner">
</a>

Update: because you're invoking the functions on the anchor tags they need to have a height and a width similar to the following (place your height and width accordingly):

<a style="height:25px;width:25px;" href="http://www.[...].com" 
onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')">
...
</a>

and I"m out...

I just used firebug, edited the HTML with the height and width and it worked fine :

enter image description here )

and while I"m sure that will solve the problem.. the doctype is set to <!doctype html> and should be something like what's here (LINK)

if you would've implemented the below approach, the image would have a height and width, and since that is the image that is being targeting, might make more sense..

http://jsfiddle.net/ETHaM/2/

if (document.images) {
    homebuttonup = new Image();
    homebuttonup.src = "http://www.placekitten.com/100/100/";
    homebuttondown = new Image();
    homebuttondown.src = "http://dummyimage.com/100x100/000/fff";
}

function buttondown(obj) {
    if (document.images) {
        obj.src = eval(obj.name+ "down.src");
    }
}

function buttonup(obj) {
    if (document.images) {
        obj.src = eval(obj.name + "up.src");
    }
}


<a href="index.html">
<img id='Img4Inner' onmouseover="buttondown(this)" onmouseout="buttonup(this)" name="homebutton" src='http://www.placekitten.com/100/100/' alt="" />
</a>

edited Apr 19 '12 at 18:32

answered Apr 18 '12 at 18:51

hanzolo

1,151
1
10
18

@mplungjan i changed my answer, just offered an alternative.. maybe its still irrelevant.. – hanzolo Apr 18 '12 at 19:01
Much better. Now get rid of the eval – mplungjan Apr 18 '12 at 19:24
http://jsfiddle.net/ETHaM/5/ I have tried it on here and it works.. but not in my index when I open it up from my directory or when I upload it on my host.. its live on viifit.com the image with the bike (icon green one) has that exact code connected to it - the link works but not the mouseover? – user1250526 Apr 18 '12 at 19:55
@user1250526 - it's your anchor tags.. they need a height and width – hanzolo Apr 18 '12 at 21:14
Sadly with that it still doesn't work, but it does work if I put this code in a blank page, the images are within a div may that be why? in the bottom post in this thread: http://www.phpfreaks.com/forums/index.php?topic=357975.0 is the whole code I am using.. – user1250526 Apr 18 '12 at 21:24
@user1250526 - did you put a height and width on the anchor tags, cause i didnt see them on your site.. and it totally works.. also, you need a standard doctype in there not (http://www.w3schools.com/tags/tag_doctype.asp), which is probably the root of the problem.. bro.. my times expensive.. – hanzolo Apr 18 '12 at 21:29
I tryed it on my machine, because it didnt work I didnt upload it.. but I have no uploaded it with height and width in anchor tags, and changed the doctype but it still doesnt work.. I dont understand how you did get it to work on my website? ive now uploaded the version with height and width but like I said still not working.. – user1250526 Apr 19 '12 at 16:29
@user1250526 i can edit the html in my browser with firebug.. and you're close.. you have to move the javascript functions to the image tag now and you're good to go.. – hanzolo Apr 19 '12 at 18:27
@user1250526 - I've fixed your code and posted the solution.. I will not be participating further. – hanzolo Apr 19 '12 at 18:33
No worries, thanks either way but I found another way around it today and it works! there was probably too much code interfering, I do really appreciate your help!! – user1250526 Apr 19 '12 at 20:30

score 0 · Answer 2 · answered Apr 18 '12 at 19:15

Your code works

Here is however a more unobtrusive version

http://jsfiddle.net/mplungjan/927nN/

<a href="index.html" id="homeLink"><img
 id='Img4Inner' class="hoverImg"
 name="homebutton" src='http://www.placekitten.com/100/100/' alt="" /></a>
 <a href="about.html" id="aboutLink"><img
 id='Img5Inner' class="hoverImg"
 name="aboutbutton" src='http://www.placekitten.com/100/100/' alt="" /></a>

var buttons={};
if (document.images) {
    buttons["homebuttonup"] = new Image();
    buttons["homebuttonup"].src = "http://www.placekitten.com/100/100/";
    buttons["homebuttondown"] = new Image();
    buttons["homebuttondown"].src = "http://dummyimage.com/100x100/000/fff";
    buttons["aboutbuttonup"] = new Image();
    buttons["aboutbuttonup"].src = "http://www.placekitten.com/100/100/";
    buttons["aboutbuttondown"] = new Image();
    buttons["aboutbuttondown"].src = "http://dummyimage.com/100x100/000/fff";
}

window.onload=function() {
    var images = document.getElementsByTagName("img");
    for (var i=0,n=images.length;i<n;i++) {
        if (images[i].className=="hoverImg") {
            images[i].parentNode.onmouseover=function() {
              var buttonname=this.id.replace("Link","button");
              document[buttonname].src = buttons[buttonname + "down"].src;
            }
            images[i].parentNode.onmouseout=function() {
              var buttonname=this.id.replace("Link","button");
              document[buttonname].src = buttons[buttonname + "up"].src;
            }
        }
    }   
}

This also doesn't work, it does great on jfiddle but not in my script, I think because the images are within a certain div, do I need to access the div instead of document.images? — user1250526, Apr 18 '12 at 20:24

Why doesnt my simple javascript rollover work?

2 Answers2

Linked