'Unhiding' an image on a Webpage

HTML & CSS
1

I’ve got an image currently hidden on a webpage (via CSS).

When the mouse hovers over it, I would like the image to re-appear.

I thought CSS and Javascript would do the trick by assigning the appropriate ‘class name’ to the element on a MouseOver event, but nothing happens.

ie. the image element is assigned class, nopal, and that class has its visibility attribute set to hidden.

Once hidden, the image doesn’t seem to fire the onMouseOver event???

Please see below for a example:

<img id=“713736374” class=“nopal” onMouseOver=“_Show(this);return true;” onMouseOut=“_Hide(this);return true;” src=“s713736374_9069.jpg” alt=“Kohli”/>

JavaScript file:

// Assign a specific class name to an object.
function _Show(obj) {

obj.className = friendpic;
}

function _Hide(obj) {

obj.className = nopal;
}

CSS file:

.friendPic{visibility: visible;}

.nopal{visibility: hidden;}

2

You could forget about JS and do something like this:


<div class="cont">
<p>Text</p>
<img src="#" >
</div>

.cont img {
    display: none;
}

.cont:hover img {
    display: block;
}

(A little bit of JS would be needed for IE Sicks, though.)