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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Location
    Wyoming, for now
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question multiple mouseover

    I need some help figuring this out. It is a bit complicated to explain, so the best thing is to check out the website. I need to duplicate all the various mouseover events/images.

    Newbie help/explanations and especially CODE is greatly appreciated! Thanks!

    Sample

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There are probably a hundred ways to do this. It's really all based on 2 things happening, an image you choose, has its source changed .src, this just happens twice. And a hidden div tag will be made visible.

    I would go about it in sets of items I want to display. In this case they are numbered 1 and 2, it can be increased to as many as you want. The first function is a generic script written to handle hiding and showing div's in a doc, it also tracks the last so that you could revert back, but that will not be needed in this case.
    Code:
    <html>
    <head>
    <script language="javascript">
    LastLayer = "menu0";  // the first div/layer
    function showLink(theLayer){
    // pass the name of the layer you want to bring to the top
    // Then hide the last layer, and make the layer passed visible. This could have been done using the z-index property
    	if (document.getElementById) { // if it's IE5 or NS6 use this syntax to access the visiblity attribute
    		eval('document.getElementById(\"' + LastLayer + '\").style.visibility = "hidden"')
    		eval('document.getElementById(\"' + theLayer + '\").style.visibility = "visible"')
    		LastLayer = theLayer;
    	}
    	if(document.layers) { // if it's NS4 use this syntax to access the visiblity attribute
    		eval('document.layers[\"' + LastLayer + '\"].visibility = "hidden"')
    		eval('document.layers[\"' + theLayer + '\"].visibility = "visible"')
    		LastLayer = theLayer;
    	}
    	if (document.all) { // if it's IE4 use this syntax to access the visiblity attribute
    		eval(LastLayer +  '.style.visibility = "hidden"')
    		eval(theLayer + '.style.visibility = "visible"')
    		LastLayer = theLayer;
    	}
    }
    </script>
    This next but of script is going to first initialize the images we are going to reference as rollovers. This is done so that there are no errors if the page takes some time to render, and the user rolls over the image no script error will occur, they will get the red X for the image though.

    When the swapImgs function will be called it will change the source of two predefined images, 'checkMark' and 'postMark' in this case, and call the showLink function with the number appended to the menu name, menu in this case.
    Code:
    <script language="javascript">
    //Declare images so that there is no error if they rollover before the page is ready.
    check1Ovr = new Image();
    post1Ovr = new Image();
    
    check2Ovr = new Image();
    post2Ovr = new Image();
    
    function swapImgs(imgSet) {
    //change the image source to the rollover image
    		eval("document.images['checkMark'].src =check"+imgSet+"Ovr.src");
    		eval("document.images['replyMark'].src =post"+imgSet+"Ovr.src");
    //show the new menu
    		showLink("menu"+imgSet)
    }
    </script>
    </head>
    The following is the base of the page, it does not look pretty, but it does do the job. It has our two images, and the dynamic menus definied on it. Call swapImgs however you see fit, an href, an imagemap whatever.

    The final script is actually going to get the images, and set the source, out of habbit I put that last. It is supposed to request them after the page has loaded the res of it. No sense in making the user download images they may not use before the page loads. You can just set the source as you mouse over, but there would be a delay as the image is downloaded for it to change. This just tends to look bad/laggy.
    Code:
    <body >
    <img src="./on.gif" name="checkMark"><br>
    <br>
    <a href="" onMouseOver="swapImgs('1');">First</a><br>
    <a href="" onMouseOver="swapImgs('2');">Second</a><br>
    <br>
    <img src="./reply.gif" name="replyMark"><br>
    <div id="menu0" style="position:absolute; width:100px; height:130px; z-index:10; left: 130px; top: 86px; color: blue; text-align: left; visibility: visible;">Menu..</div>
    <div id="menu1" style="position:absolute; width:100px; height:130px; z-index:10; left: 130px; top: 86px; color: blue; text-align: left; visibility: hidden;">
    This<br>is<br>a<br>menu</div>
    <div id="menu2" style="position:absolute; width:100px; height:130px; z-index:10; left: 130px; top: 86px; color: green; text-align: left; visibility: hidden;">
    This<br>is<br>also<br>a<br>menu</div>
    
    <script language="javascript">
    //Actually get the images into cache
    check1Ovr.src = "./vb_bullet.gif";
    post1Ovr.src = "./newthread.gif";
    
    check2Ovr.src = "./on.gif";
    post2Ovr.src = "./reply.gif";
    </script>
    
    </body>
    </html>
    You can get the images I referenced right off this page, the dark check on yellow(on.gif), and the yellow on dark checkmarks (vb_bullet.gif) as well as the post reply (reply.gif) and new thread (newthread.gif) images at the top of this page. Cut out my comments and have a look, it should work for you.

    ShriekForth

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To have more than one action with a mouse event

    onmouseover="action one ; action two"

  • #4
    New to the CF scene
    Join Date
    Jul 2002
    Location
    Wyoming, for now
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ShriekForth, thanks!

    ShriekForth, you da man! That code was awesome. I even understood it (I think).

    All that remains now is for me to play with the positioning and add some additional items to change.

    I do have another question, how do I make the images (all of them) invisible or at least not there until I mouseover 'First' or 'Second' ?? To see what I've got so far, click here.

    Thanks!

  • #5
    New to the CF scene
    Join Date
    Jul 2002
    Location
    Wyoming, for now
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mrs G -

    I DID know that one (it's bitten my butt before though...)

  • #6
    New Coder
    Join Date
    Jul 2002
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you are going to use images for mouseovers you are best preloading them.

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    One way would be to set all of the div's to be hidden until the page is loaded... or have a layer over the top that is hidden when the page is loaded. I'd use onLoad in the body

    <body onLoad="showDivs()">
    <script>
    function showDivs(){
    showLink('main')
    showLink('menu0')
    }
    </script>
    Then create and define the 'main' div to hold the be hidden to start with

    <div id="main" style="position:absolute; width:100px; height:130px; z-index:10; left: 130px; top: 86px; color: blue; text-align: left; visibility: hidden;">
    <img src="./on.gif" name="checkMark"><br>
    <br>
    <a href="" onMouseOver="swapImgs('1');">First</a><br>
    <a href="" onMouseOver="swapImgs('2');">Second</a><br>
    <br>
    <img src="./reply.gif" name="replyMark">
    </div>

    ShriekForth

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    just a comment with ShriekForth' code. You could have done away with eval() method in your showLink() function, and in NS4.X the visibility values are show | hide, and you need to put else because if the browser is IE5 or above, it will go to if (document.getElementById) and if (document.all).


    Code:
    <script language="javascript">
    LastLayer = "menu0";  // the first div/layer
    function showLink(theLayer){
    // pass the name of the layer you want to bring to the top
    // Then hide the last layer, and make the layer passed visible. This could have been done using the z-index property
    	if (document.getElementById) { // if it's IE5 or NS6 use this syntax to access the visiblity attribute
    		document.getElementById(LastLayer).style.visibility = "hidden";
    		document.getElementById(theLayer).style.visibility = "visible";
    		LastLayer = theLayer;
    	}
    	else if(document.layers) { // if it's NS4 use this syntax to access the visiblity attribute
    		document.layers[LastLayer].visibility = "hide";
    		document.layers[theLayer].visibility = "show";
    		LastLayer = theLayer;
    	}
    	else if (document.all) { // if it's IE4 use this syntax to access the visiblity attribute
    		document.all[LastLayer].style.visibility = "hidden";
    		document.all[theLayer].style.visibility = "visible";
    		LastLayer = theLayer;
    	}
    }
    </script>

  • #9
    New to the CF scene
    Join Date
    Jul 2002
    Location
    Wyoming, for now
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy ShriekForth, it didn't work

    I tried that code, and it didn't work. Instead of it just hiding the checkmark and postreply image, it removed everything including the 'First' and 'Second' links. The only thing visible on the page was 'Link Menu...' So, nothing worked since you couldn't see anything to click on.

    What I'd like it to do is remove the checkmark image (on.gif) and the postreply.gif image but LEAVE the 'First' and 'Second' links visible. Is that possible?

    [dumb question] what does it mean when you have './imagename.gif'? I know what '../imagename' means... [/end dumb question]

  • #10
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Remove them all the time? or just until they load? You could set each image into a div and then show them when the page is finally loaded. Did you try to use the last bit of code as is? or did you insert the function into the page.

    As to your other question... are you referring to the '../' vs the './'? That just tells the browser where the image resides in relation to the page so that it knows where to request it from teh server. The .. means up one directory, while the . means check the same directory.

    ShriekForth

  • #11
    New to the CF scene
    Join Date
    Jul 2002
    Location
    Wyoming, for now
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, both.
    Let's say that I'll have some images as part of a website's home page. Some images will be static and not a part of the navigation. Other images will be part of the navigation and it's THOSE images that I will want to have swap and/or appear when appropriate. So, for now, let's just say that I'd like one (the top one, on.gif) to be always visible -- and, the bottom image to only be visible when either Link 1 or Link 2 is mouseovered, make sense?

    I inserted the newer code into what was already present rather than using it as is since I figured it wouldn't work all on its own.

    So, is the './imagename.gif' really even necessary since, by default, it looks in the current path?

  • #12
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There are a couple of ways you could go about making it appear that the image is not there. The easiest might be to have the initial image on the "post thread" be a transparent image. Basically a place holder waiting for the mouse over. It could be a simple 1X1 image, that you stretch to be the same size as the image you are going to swap in. Then onMouseOut change it back to the transparent image

    Otherwise, you could make it on a separate layer, hide it initially, and then show the div when you mouse over the link. Then you would need to work with the onMouseOut to hide the layer again when the mouse leaves the link. In that case you could I suppose just have a div for each mouse over like the menu, then you would not be changing the img source.

    And yes './', would not be necessary, it is just a habit I have developed since I usually don't keep the images in the same directory as the html.

    ShriekForth


  •  

    Posting Permissions

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