inserting an image on mouse over and onmouse out

Question

I have an image inside a div which im trying to change when the mouse is over then revert when the mouse is out. However I am having difficulties inserting the image into the div on mouse out. Is the a particular way to go about this or an alternative message. The issues seems to be with the placement of slashes in the HTML insertion.

  <div class='myImage' onmouseout='this.innerHTML = '<img src='./images/myImage.jpg' />' onmouseover='this.innerHTML = \"\"; this.style.backgroundColor = \"#1D4088\"' style='height:100px; width:100px'><image src='./images/myImage.jpg'></div>

score 2 · Answer 1 · answered Apr 14 '12 at 03:28

2

hmm seems youre overcomplicating things, not to worry.

try following the ´sprite´ tutorials.

Here's a good one:

and if you really wanna get into it: http://css-tricks.com/css-sprites/

answered Apr 14 '12 at 03:28

krekettek

27
7

Thanks for your input. However the image myImage is actually dynamic and is inserted from another js function itself. So it has to work that way unfortunately. – Christopher Apr 14 '12 at 03:34
okay..hmm, no experience with that. Try reading this then: http://www.quackit.com/javascript/image_rollovers.cfm Out of curiousity, is there a particular reason why ur using this method? – krekettek Apr 14 '12 at 03:38
1

thanks... il check it out. I do this because I can read in ID tags from a jSON object etc and post them to a script myImages.php?id=(id). Then I can insert images on the page dynamically etc do what ever I like with them. Im just trying to make some cool effects when you mouse over them but cant get it to revert to the image. – Christopher Apr 14 '12 at 03:44

score 1 · Accepted Answer · answered Apr 14 '12 at 03:45

I think your double and single quotes are a bit conflicting, try putting the javascript into a function instead

<div class="myImage" onmouseout="toggle(this,'1')" onmouseover="toggle(this,'2')" style="height:100px; width:100px"><image src="./images/myImage.jpg"></div>

And the javascript

function toggle(e,a) {
    if(a=='2') {
        e.innerHTML = '';
        e.style.backgroundColor = '#1D4088';
    } else {
        e.innerHTML = '<img src="./images/myImage.jpg" />';
        e.style.backgroundColor = '';
    }
}

inserting an image on mouse over and onmouse out

2 Answers2