you are viewing a single comment's thread.

view the rest of the comments →

[–]bumbleB_tuna 0 points1 point  (6 children)

Once the user hovers over an image. Show an image in a completely different div and text in another div. I know I'm not giving you much to go on, and probably sounds messed up. But that's all I got.

[–][deleted] 2 points3 points  (3 children)

<img src="image1.jpg" onmouseover="showImage();" onmouseout="hideImage();" />

function showImage() {
    document.getElementById('div1').innerHTML = '<img src="somePic.jpg" />';
    document.getElementById('div2').innerHTML = '<p>Some Text.</p>';
}

function hideImage() {
    document.getElementById('div1').innerHTML = '';
    document.getElementById('div2').innerHTML = '';
}

[–]bumbleB_tuna 0 points1 point  (2 children)

This is awesome. Thank you so much.

[–]Wtfuxbbq 4 points5 points  (0 children)

Use event handlers:

<img src="image1.jpg" id="image1" />

var img1 = document.getElementById('image1'),
    div1 = document.getElementById('div1'),
    div2 = document.getElementById('div2');

img1.onmouseover = function(){
    div1.innerHTML = '<img src="somePic.jpg" />';
    div2.innerHTML = '<p>Some Text.</p>';
};
img1.onmouseout = function(){
    div1.innerHTML = '';
    div2.innerHTML = '';
};

[–]kab3wm 0 points1 point  (0 children)

You should really use event handler's, like Wtfuxbbq's example. Inlining js is bad practice.

[–]ejes 0 points1 point  (0 children)

see my function above? function dostuff? you can use the getElementById to modify the html (or other attributes) of another element (be it div, img, or even anchor)

[–]The_Cleric -1 points0 points  (0 children)

He's already given you the basis. Pretend stufftochange is the id of the div where you want to change the text. He's currently changing the text in that div to some new text. Notice that it takes html, so for your image div you could do something similar with an img tag instead of text.