CodingForums.com - Swapping Divs in a CSS-sprites image

CodingForums.com (http://www.codingforums.com/index.php)

- DOM and JSON scripting (http://www.codingforums.com/forumdisplay.php?f=15)

- - Swapping Divs in a CSS-sprites image (http://www.codingforums.com/showthread.php?t=288358)

Swapping Divs in a CSS-sprites image

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.

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>