[RESOLVED] rotate content block within a page?

[scottpoliseno]

Here is what I want to do.

Can I convert this rotator to rotate hidden <div> tags instead of plain images?

var SlideShow = new Array(12);
SlideShow[0] = "../images/port_ident0_03.gif";
SlideShow[1] = "../images/port_ident1_03.gif";
SlideShow[2] = "../images/port_ident2_03.gif";
SlideShow[3] = "../images/port_ident3_03.gif";
SlideShow[4] = "../images/port_ident4_03.gif";
SlideShow[5] = "../images/port_ident5_03.gif";
SlideShow[6] = "../images/port_ident6_03.gif";
SlideShow[7] = "../images/port_ident7_03.gif";
SlideShow[8] = "../images/port_ident8_03.gif";
SlideShow[9] = "../images/port_ident9_03.gif";
SlideShow[10] = "../images/port_ident10_03.gif";
SlideShow[11] = "../images/port_ident11_03.gif";

var SSNUM = 0;

function GoBack ()
{
	if (SSNUM > 0) {
        SSNUM--
        document.BigPic.src=SlideShow[SSNUM]
    }
        else
   	{
		SSNUM = 11
		document.BigPic.src=SlideShow[SSNUM]	
   	}
}

function GoNext() {
    if (SSNUM < 11) {
        SSNUM++
        document.BigPic.src=SlideShow[SSNUM]
    }  

    else
   	{
		SSNUM = 0
		document.BigPic.src=SlideShow[SSNUM]	
   	}
}

The reason I want to rotate the div tag instead is because I want to have a different link as well as an image. Each link will be as unique as the image.

Thanks for the assistance.

Scott

[Weedpacket]

Your code would switch the <div> tags' "display:" style on and off.

[scottpoliseno]

Here is the JS code that I came up with... It's work fine... in both IE and Firefox...

function DoReveal(tid1,tid2,tid3,tid4) {
document.getElementById(tid1).style.display = "none";
document.getElementById(tid2).style.display = "none";
document.getElementById(tid3).style.display = "";
document.getElementById(tid4).style.display = "";
}

And here is what I did with the div tags...

<!-- Begin Rotation div Tags -->
		<div id="web1">
        <map name="web1">
        <area target="_blank" href="http://www.indoorcomfortcorp.com" shape="rect" coords="117, 289, 257, 302">
        </map>
        <img border="0" src="../images/web_indoorcomfort_03.jpg" width="478" height="322" name="BigPic" usemap="#web1">
        </div>
        <div id="webrotator1">&lt; <a class="rotator" href="#top" onclick="DoReveal('web1','webrotator1','web9','webrotator9');">BACK</a>&nbsp; |&nbsp; <a class="rotator" href="#top" onclick="DoReveal('web1','webrotator1','web2','webrotator2');">NEXT</a> &gt;</div>

    <div id="web2" style="display:none">
    <map name="web2" style="display:none">
    <area target="_blank" href="http://www.bigshears.com" shape="rect" coords="117, 289, 216, 302">
    </map>
    <img border="0" src="../images/web_bigshears_03.jpg" width="478" height="322" name="BigPic" usemap="#web2">
    </div>
    <div id="webrotator2" style="display:none">&lt; <a class="rotator" href="#top" onclick="DoReveal('web2','webrotator2','web1','webrotator1');">BACK</a>&nbsp; |&nbsp; <a class="rotator" href="#top" onclick="DoReveal('web2','webrotator2','web3','webrotator3');">NEXT</a> &gt;</div>

    <div id="web3" style="display:none">
    <map name="web3">
    <area target="_blank" href="http://www.loyaltylogo.com" shape="rect" coords="117, 289, 211, 302">
    </map>
    <img border="0" src="../images/web_loyaltylogo_03.jpg" width="478" height="322" name="BigPic" usemap="#web3">
    </div>
    <div id="webrotator3" style="display:none">&lt; <a class="rotator" href="#top" onclick="DoReveal('web3','webrotator3','web2','webrotator2');">BACK</a>&nbsp; |&nbsp; <a class="rotator" href="#top" onclick="DoReveal('web3','webrotator3','web4','webrotator4');">NEXT</a> &gt;</div>

    <div id="web4" style="display:none">
    <map name="web4">
    <area target="_blank" href="http://www.blueskycgi.com" shape="rect" coords="109, 289, 212, 302">
    </map>
    <img border="0" src="../images/web_bluesky_03.jpg" width="478" height="322" name="BigPic" usemap="#web4">
    </div>
    <div id="webrotator4" style="display:none">&lt; <a class="rotator" href="#top" onclick="DoReveal('web4','webrotator4','web3','webrotator3');">BACK</a>&nbsp; |&nbsp; <a class="rotator" href="#top" onclick="DoReveal('web4','webrotator4','web5','webrotator5');">NEXT</a> &gt;</div>

    <div id="web5" style="display:none">
    <map name="web5">
    <area target="_blank" href="http://www.academypool.com" shape="rect" coords="145, 289, 257, 302">
    </map>
    <img border="0" src="../images/web_academy_03.jpg" width="478" height="322" name="BigPic" usemap="#web5">
    </div>
    <div id="webrotator5" style="display:none">&lt; <a class="rotator" href="#top" onclick="DoReveal('web5','webrotator5','web4','webrotator4');">BACK</a>&nbsp; |&nbsp; <a class="rotator" href="#top" onclick="DoReveal('web5','webrotator5','web6','webrotator6');">NEXT</a> &gt;</div>

    <div id="web6" style="display:none">
    <map name="web6">
    <area target="_blank" href="http://www.brcproducts.com" shape="rect" coords="167, 289, 274, 302">
    </map>
    <img border="0" src="../images/web_brc_03.jpg" width="478" height="322" name="BigPic" usemap="#web6">
    </div>
    <div id="webrotator6" style="display:none">&lt; <a class="rotator" href="#top" onclick="DoReveal('web6','webrotator6','web5','webrotator5');">BACK</a>&nbsp; |&nbsp; <a class="rotator" href="#top" onclick="DoReveal('web6','webrotator6','web7','webrotator7');">NEXT</a> &gt;</div>

    <div id="web7" style="display:none">
    <map name="web7">
    <area target="_blank" href="http://www.jwjscountertops.com" shape="rect" coords="155, 289, 275, 302">
    </map>
    <img border="0" src="../images/web_jwjs_03.jpg" width="478" height="322" name="BigPic" usemap="#web7">
    </div>
    <div id="webrotator7" style="display:none">&lt; <a class="rotator" href="#top" onclick="DoReveal('web7','webrotator7','web6','webrotator6');">BACK</a>&nbsp; |&nbsp; <a class="rotator" href="#top" onclick="DoReveal('web7','webrotator7','web8','webrotator8');">NEXT</a> &gt;</div>

    <div id="web8" style="display:none">
    <map name="web8">
    <area target="_blank" href="http://www.mundocoffees.com" shape="rect" coords="117, 289, 237, 302">
    </map>
    <img border="0" src="../images/web_mundo_03.jpg" width="478" height="322" name="BigPic" usemap="#web8">
    </div>
    <div id="webrotator8" style="display:none">&lt; <a class="rotator" href="#top" onclick="DoReveal('web8','webrotator8','web7','webrotator7');">BACK</a>&nbsp; |&nbsp; <a class="rotator" href="#top" onclick="DoReveal('web8','webrotator8','web9','webrotator9');">NEXT</a> &gt;</div>

    <div id="web9" style="display:none">
    <map name="web9">
    <area target="_blank" href="http://www.qualitysportsinc.com" shape="rect" coords="135, 289, 257, 302">
    </map>
    <img border="0" src="../images/web_qualitysports_03.jpg" width="478" height="322" name="BigPic" usemap="#web9">
    </div>
    <div id="webrotator9" style="display:none">&lt; <a class="rotator" href="#top" onclick="DoReveal('web9','webrotator9','web8','webrotator8');">BACK</a>&nbsp; |&nbsp; <a class="rotator" href="#top" onclick="DoReveal('web9','webrotator9','web1','webrotator1');">NEXT</a> &gt;</div>

  <!-- End Rotation div Tags -->

Let me know if anyone has suggestions to clean this up.

Scott