Swapping Divs in a CSS-sprites image

Cyrano002 · 02-26-2013, 11:47 PM

Hi,

I have an image I created using CSS sprites, which enabled 5 points of the image to "light up" when scrolled over. I am now trying to use Javascript to have a comment box appear during mouseover using swapDiv and getElementByTag, so that the other divs are hidden while one appears. My code is as follows:

Code:

<!DOCTYPE html>

<html>

<head>

<title></title>

<link type="text/css" type="text/javascript" rel="stylesheet">

</head>

<body>

<ul id="shield">
    <li id="point1"><a href="#1" onmouseover="swapDiv('d0')"></a></li> 
    <li id="point2"><a href="#2" onmouseover="swapDiv('d1')"></a></li>
    <li id="point3"><a href="#3" onmouseover="swapDiv('d2')"></a></li>
    <li id="point4"><a href="#4" onmouseover="swapDiv('d3')"></a></li>
    <li id="point5"><a href="#5" onmouseover="swapDiv('d4')"></a></li>
</ul>

<div class='info' id='d0'> 
Comment 1
</div>

<div class='info' id='d1'>
Comment 2
</div>

<div class='info' id='d2'>
Comment 3
</div>

<div class='info' id='d3'>
Comment 4
</div>

<div class='info' id='d4'>
Comment 5
</div>

<script>
function swapDiv(elem) {
	var alldivs = document.getElementByTagName('div');
	for (i=0; i < alldivs.length; i++) {
		if (alldivs[i].id = elem) {
        	alldivs[i].style.display = 'block';
        }
        else alldivs[i].style.display = 'none';
        }
	}
</script>

</body>

</html>

This is my first time using this site, so I apologize if my post isn't correctly formatted.

Thanks.

sunfighter · 02-27-2013, 04:41 PM

Could not get your js to work so made a simpler on:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet"> <!--  I DON'T HAVE ACCESS TO THIS AND YOU HAD TWO "TYPES" DEFINED SO MADE MY OWN -->
<style type="text/css">
#d0, #d1, #d2, #d3, #d4{
	display:none;
}
</style>

</head>

<body>
<ul id="shield">
    <li id="point1"><a href="#1" onmouseover="swapDiv('d0')">point1</a></li>
    <li id="point2"><a href="#2" onmouseover="swapDiv('d1')">point2</a></li>
    <li id="point3"><a href="#3" onmouseover="swapDiv('d2')">point3</a></li>
    <li id="point4"><a href="#4" onmouseover="swapDiv('d3')">point4</a></li>
    <li id="point5"><a href="#5" onmouseover="swapDiv('d4')">point5</a></li>
</ul>
<div class='info' id='d0'>Comment 1</div>
<div class='info' id='d1'>Comment 2</div>
<div class='info' id='d2'>Comment 3</div>
<div class='info' id='d3'>Comment 4</div>
<div class='info' id='d4'>Comment 5</div>
<script>
function swapDiv(elem) {
	document.getElementById("d0").style.display = "none";
	document.getElementById("d1").style.display = "none";
	document.getElementById("d2").style.display = "none";
	document.getElementById("d3").style.display = "none";
	document.getElementById("d4").style.display = "none";
	document.getElementById(elem).style.display = "block";
}
</script>
</body>
</html>