We help IT Professionals succeed at work.

show and hide JS/CSS

Refael
Refael asked
on
Hello experts,

I have an image of a house with hotspots links. Each hotspot should hide the initial house image and show the relevant image depending on the hotspot.

Here is the code:
<div id="house_container">

<div id="house"><img src="house.gif" usemap="#Map" /></div>
<div id="house35" style="visibility:hidden;"><img src="35.gif" usemap="#Map" /></div>
<div id="house27" style="visibility:hidden;"><img src="27.gif" usemap="#Map" /></div>

<map name="Map" id="Map">

<area shape="rect" alt="" coords="102,51,135,83" href="#" onmouseover="Hide('house'); Show('house35');" onmouseout="Hide('house35'); Show('house'); " />
<area shape="rect" alt="" coords="63,92,99,123" href="#" onmouseover="Hide('house'); Show('house27');" onmouseout="Hide('house27'); Show('house'); " />

</map>
</div>


---------------------------------------------
below is the JS code the page uses:

function Show(id) {
   obj = document.getElementsByTagName("div");
   if (obj[id].style.visibility == 'hidden'){
   	obj[id].style.visibility = 'visible';
   }
   
   if (obj[id].style.display == 'none'){
   	obj[id].style.display = 'block';
   }
}

function Hide(id) {
    obj = document.getElementsByTagName("div");
    if (obj[id].style.visibility == 'visible'){
    	obj[id].style.visibility = 'hidden';
    }
    
    if (obj[id].style.display == 'block'){
   		obj[id].style.display = 'none';
   	}
}
----------------------------------------------------

Open in new window


"house 35" is showing in the right place (replacing the initial image but "house27"  (the 2nd image) is showing down below the initial house.

How can I get "house27" to show where the initial image is like the initial image and "house35" is positioned?
Comment
Watch Question

View Solution Only

Commented:
Hello!

I think your javascript is fine. The problems I see are in the CSS code.

Give house_container position:relative;

Make each house div belong to a common class (perhaps "house"), and give that class the position:absolute; property and the top:0; property.


PUT THIS IN YOUR <HEAD> TAG:
----------------------------

<style type="text/css">

#house_container {
	position: relative;
	overflow: auto;
}
.house {
	position: absolute;
	top: 0;
}

</style>



ADD "HOUSE" CLASS TO DIVS:
---------------------------

<div id="house_container">

<div id="house"><img src="house.gif" usemap="#Map" /></div>
<div class="house" id="house35" style="visibility:hidden;"><img src="35.gif" usemap="#Map" /></div>
<div class="house" id="house27" style="visibility:hidden;"><img src="27.gif" usemap="#Map" /></div>

<map name="Map" id="Map">

<area shape="rect" alt="" coords="102,51,135,83" href="#" onmouseover="Hide('house'); Show('house35');" onmouseout="Hide('house35'); Show('house'); " />
<area shape="rect" alt="" coords="63,92,99,123" href="#" onmouseover="Hide('house'); Show('house27');" onmouseout="Hide('house27'); Show('house'); " />

</map>
</div>

Open in new window