Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,177
    Thanks
    23
    Thanked 601 Times in 600 Posts
    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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •