Layer visibility & how to load different images used in layer

Discussion in 'JavaScript' started by fengineer, Jan 21, 2008.

0
  1. #1
    I'm a newbie to javascript so the following code was cut & pasted from various sources to get it to where it is now. Hence, I don't know too much about what's going on inside it.

    Works well thus far but all I need now to put the finishing touch to the HTML page it is to have different images (pic1.jpg, pic2.jpg, etc) used in the layer that shows & hides. The images depend on which link is selected on the HTML page. (See code below). I just can't work out how to get the <IMG> tag to change accordingly.

    Would greatly appreciate if someone can advise or complete the code if this functionality is possible.



    Here is the HTML page code:
    <html>
    <head>

    <script language="JavaScript1.2" src="gpics.js" type="text/javascript"></script>

    </head>
    <body>




    <a href="javascript:showMe();">Show pic1</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:hideMe();">Hide pic1</a><br><br><br>

    <a href="javascript:showMe();">Show pic2</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:hideMe();">Hide pic2</a><br><br><br>




    <!-- BEGIN FLOATING LAYER CODE //-->

    <div id="theLayer" style="position:absolute;width:250px;left:100;top:100;visibility:hidden">
    <table border="0" width="250" bgcolor="#424242" cellspacing="0" cellpadding="5">
    <tr>
    <td width="100%">
    <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
    <tr>
    <td id="titleBar" style="cursor:move" width="100%">
    <ilayer width="100%" onSelectStart="return false">
    <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
    <font face="Arial" color="#FFFFFF">Layer Title</font>
    </layer>
    </ilayer>
    </td>
    <td style="cursor:hand" valign="top">
    <a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial style="text-decoration:none">X</font></a>
    </td>
    </tr>
    <tr>
    <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">


    <!-- BEGIN CONTENT AREA //-->
    This is where your content goes.<br>
    It can be any html code or text.<br>
    Hello world.<br>


    <!-- THE FOLLOWING <IMG> TAG NEEDS TO SOMEHOW HAVE THE ABILITY TO LOAD EITHER PIC1.JPG OR PIC2.JPG, ETC., USING JAVASCRIPT //-->
    <IMG SRC='pic1.jpg' border='5' ALT='Picture description...'>


    <!-- END OF CONTENT AREA //-->
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    <!-- END FLOATING LAYER CODE //-->




    </body>
    </html> ​






    Here is the "gpics.js" file code:
    isIE=document.all;
    isNN=!document.all&&document.getElementById;
    isN4=document.layers;
    isHot=false;

    function ddInit(e){
    topDog=isIE ? "BODY" : "HTML";
    whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");
    hotDog=isIE ? event.srcElement : e.target;
    while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
    hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
    }
    if (hotDog.id=="titleBar"){
    offsetx=isIE ? event.clientX : e.clientX;
    offsety=isIE ? event.clientY : e.clientY;
    nowX=parseInt(whichDog.style.left);
    nowY=parseInt(whichDog.style.top);
    ddEnabled=true;
    document.onmousemove=dd;
    }
    }

    function dd(e){
    if (!ddEnabled) return;
    whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
    whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
    return false;
    }

    function ddN4(whatDog){
    if (!isN4) return;
    N4=eval(whatDog);
    N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
    N4.onmousedown=function(e){
    N4.captureEvents(Event.MOUSEMOVE);
    N4x=e.x;
    N4y=e.y;
    }
    N4.onmousemove=function(e){
    if (isHot){
    N4.moveBy(e.x-N4x,e.y-N4y);
    return false;
    }
    }
    N4.onmouseup=function(){
    N4.releaseEvents(Event.MOUSEMOVE);
    }
    }

    function hideMe(){
    if (isIE||isNN) whichDog.style.visibility="hidden";
    else if (isN4) document.theLayer.visibility="hide";
    }

    function showMe(){
    if (isIE||isNN) whichDog.style.visibility="visible";
    else if (isN4) document.theLayer.visibility="show";
    }

    document.onmousedown=ddInit;
    document.onmouseup=Function("ddEnabled=false");​
     
    fengineer, Jan 21, 2008 IP
  2. webwurks

    webwurks Well-Known Member

    Messages:
    126
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    118
    #2
    You need to change your image tag to include a name to reference like this:
    <IMG SRC='pic1.jpg' border='5' ALT='Picture description...' name='pic2chg'>

    Then in your javascript to a test to determine which page you are on then change the image like this:

    document.pic2chg.src = <name and path of new image>
     
    webwurks, Jan 22, 2008 IP
  3. fengineer

    fengineer Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Got it working! Thanks.
     
    fengineer, Jan 22, 2008 IP
  4. rebinkjoseph

    rebinkjoseph Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I have checked in Mozilla and not working fine.Do you have any idea what chnages are need to make it work in Mozilla?
     
    rebinkjoseph, Nov 4, 2009 IP