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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Rollover link highlights corresponding link...

    Hi
    I'm not sure if this is possible in css/html as I am a complete newb at both.
    But here goes- (Sorry if my terminology isn't correct...)

    I have a list of text links on the left navigation of the page and a bunch of corresponding image links on the right. When I roll over a text link on the left side, I want the corresponding image link to also go to it's roll over state, and vice versa, when an image link is rolled over it's corresponding text link should go to the rolled over state.

    I hope that makes sense!? I can make an image to illustrate this better if needs be?

    Any help would be much appreciated!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello bpbpbp,
    Have a look at the rollovers on my homepage. I think that's pretty close to what your describing.
    Look at the source to see how they're done.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Here is a single rollover example for you -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    #galleries {
    	width: 400px;
    	float: right;
    	margin: 55px 230px 0 0;
    	font-size: 1.4em;
    	text-align: left;
    	line-height: 59px;
    }
    #rollover1,
    	#rollover1 a:hover,
    	#rollover1 a {
    		width: 400px;
    		height: 59px;
    		display:block;
    	}
    	#rollover1 {
    		background: url(http://nopeople.com/files/roll-1.jpg) no-repeat right bottom;
    		margin: 0 0 10px 0;
    	}
    	#rollover1 a:hover {
    		background: url(http://nopeople.com/files/roll-1.jpg) no-repeat right top;
    		color: #CC0033;
    	}
    	#rollover1 a {
    		background-position: bottom;
    		color: #ffffff;
    	}
        </style>
    </head>
    <body>
        <div id="container">
                <div id="galleries">	
                            <div id="rollover1"><a href="#">Wallpapers</a></div>
                <!--closes galleries--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Excavator, that has the exact effect I'm after. However I'm unsure whether I could apply that code to this design layout?
    I've attached an example of the sort way I'd like it to appear. I don't think I could have the text links and the thumbnails in the same container. So would I have to use a javascrip?
    Or maybe I should re-think the design of my folio page if it's too tricky...

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning bpbpbp,
    I think that could be done easily enough with span tags so you could stay away from js.
    Do you have a test site with some code up yet? Link us to that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Good afternoon Excavator!
    I hope so, I tried to code fist some js before, to no avail.
    Here's my current attempt at the projects page - http://bpbpbpmail.fileave.com/projects-page.zip
    Cheers!

  • #7
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    371
    Thanks
    9
    Thanked 54 Times in 53 Posts
    Hi bpbpbp.
    Personally CSS solution is always the first thing first.

    But in your case,
    CSS by itself can't bring your project_list's links and roll_over's images up simultaneously,
    and javascript should be used.

    How many links and images in that project.html, 18 links and 20 images?
    Why differs, they should be the same aren't they?
    And it means you have to install 40 mouseover and 40 mouseout events, it is possible though...hmm

    Hendra.

  • #8
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Hendra,
    The upload is just a rough work in progress so it's very scrappy, which is why the links and images don't add up.
    It sounds complicated so I guess a redesign is in order. Thanks for the help

    Bill

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello again bpbpbp,
    Hendra is right, a js solution may be better.
    The best I could do with span tags is highlighting the text in the left menu column when a spot on the image map is hovered, but it wouldn't work the other way around.

    Sorry for not getting back to you sooner.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    371
    Thanks
    9
    Thanked 54 Times in 53 Posts
    A little experiment with your project...

    Change within __project__.html:
    PHP Code:
    ...
    <
    script src="javascripts/__hover__.js" type="text/javascript"></script>    
    </head>
    <body onload="javascript:init_simhover();" onunload="javascript:done_simhover();">
    ... 
    And __hover__.js contains below:
    PHP Code:
    // RULE 1: EACH "PROJECT_LIST" LINKS MUST BE DECLARED IN SAME SEQUENCE AS "ROLL_OVERS" IMAGES.
    // RULE 2: TOTAL OF PROJECT_LIST LINKS = NUMBER OF "ROLL_OVERS" IMAGES.
    // RULE 3: X-BROWSERS INCOMPATIBLE VERSION.
    // RULE 4: FULL OF ERRORS :)
    // RULE 5: FEEL FREE TO USE/ MODIFY

    var 
      
    arr_pl=null// GLOBAL ARRAYS OF OBJECTS LIVE
      
    arr_ro=null;

    //RETURNS INDEX OF AN OBJECT A WITHIN ARRAY B ELSE -1
    function indexof(a,b){
      var
        
    d=-1;
      for (var 
    e=0;e<b.length;e++){
        if (
    a==b[e]){
          
    d=e;
          break;
        }
      }
      return 
    d;
    }

    // GLOBAL ONMOUSEOVER & ONMOUSEOUT ON PL LINKS
    function onmouseover_pl(ev){
      var 
        
    a=indexof(ev.target,arr_pl);
      if (
    a!=-1arr_ro[a].style.opacity=1;
    }

    function 
    onmouseout_pl(ev){
      var 
        
    a=indexof(ev.target,arr_pl);
      if (
    a!=-1arr_ro[a].style.opacity=0.5;
    }

    // GLOBAL ONMOUSEOVER & ONMOUSEOUT ON RO IMAGES
    function onmouseover_ro(ev){
      var 
        
    a=indexof(ev.target,arr_ro);
      if (
    a!=-1arr_pl[a].style.backgroundColor="cyan";
    }

    function 
    onmouseout_ro(ev){
      var 
        
    a=indexof(ev.target,arr_ro);
      if (
    a!=-1arr_pl[a].style.backgroundColor="white";
    }


    // GLOBAL INITIALIZE SIMULTANEOUS HOVERING
    function init_simhover(){
      var
        
    a=null// DUMMY POINTERS
        
    b=null;

      
    //ALLOCATE EMPTY ARRAYS.
      
    arr_pl=new Array();
      
    arr_ro=new Array();

      
    // SAVE ALL PROJECT_LIST LINK OBJECTS TO ARR_PL.
      
    a=document.getElementById("project_list").getElementsByTagName("a");
      for (var 
    c=0c<a.length;c++){
        
    arr_pl.push(a[c]);
      }

      
    // SAVE ALL ROLL_OVERS IMAGE OBJECTS TO ARR_RO.
      
    a=document.getElementsByClassName('roll_overs');
      for (var 
    c=0c<a.lengthc++){
        
    b=a[c].getElementsByTagName("img");
        for (var 
    d=0d<b.length;d++){
          
    arr_ro.push(b[d]);
        }
      }

      
    //ADD LISTENERS TO ARR_PL OBJECTS.
      
    for (var c=0c<arr_pl.lengthc++){
        
    arr_pl[c].addEventListener("mouseover",onmouseover_pl,false);
        
    arr_pl[c].addEventListener("mouseout"onmouseout_pl,false);
      }

      
    //ADD LISTENERS TO ARR_RO OBJECTS.
      
    for (var c=0c<arr_ro.lengthc++){
        
    arr_ro[c].addEventListener("mouseover",onmouseover_ro,false);
        
    arr_ro[c].addEventListener("mouseout"onmouseout_ro,false);
      }

    }

    // CLEANUP SIMULTANEOUS HOVERING
    function done_simhover(){

      
    //REMOVE LISTENERS FROM ARR_RO.
      
    for (var c=0c<arr_ro.lengthc++){
        
    arr_ro[c].removeEventListener("mouseover",onmouseover_ro,false);
        
    arr_ro[c].removeEventListener("mouseout"onmouseout_ro,false);
      }

      
    //REMOVE LISTENERS FROM ARR_PL.
      
    for (var c=0c<arr_pl.lengthc++){
        
    arr_pl[c].removeEventListener("mouseover",onmouseover_pl,false);
        
    arr_pl[c].removeEventListener("mouseout"onmouseout_pl,false);
      }

      
    delete arr_plarr_pl=null;
      
    delete arr_roarr_ro=null;


  • Users who have thanked hdewantara for this post:

    bpbpbp (12-26-2009)

  • #11
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hdewantara, that's ace!
    I just applied your codes and I don't know how it works but that's exactly the thing I'm after. I'm going to have a tinker around and try to understand it. Millions of thanks, much appreciated!
    I'll post when I've got something uploaded.

  • #12
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jenny craig

    Using html and css is increasing your creativity. I like your post and i would like to know more about Rollover links.
    Jenny Craig
    Blockbuster
    Blockbuster

  • #13
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    371
    Thanks
    9
    Thanked 54 Times in 53 Posts
    Hey bpbpbp, I'm glad it's working

    So it would just need some code optimization and
    probably some error checking then. See
    notes I made on beginning of __hover__.js file,
    especially RULE 1 AND 3. Good luck!

    Better late but...
    Merry Xmas to all of you.

  • #14
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ha ha yes, I like rule 4. But The only error I notice superficially is that after you have hovered over the img links, the corresponding text highlights will no longer appear. I'm hoping some kind of 'refresh javascript' command work to fix this?

    shiny happy new year!

  • #15
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    371
    Thanks
    9
    Thanked 54 Times in 53 Posts
    Yes, somehow javascript stop responding,
    after a failure on setting style to an undefined object.

    Hope these additional red phrases could fix it ( __hover__.js ):

    Code:
    ...
    // GLOBAL ONMOUSEOVER & ONMOUSEOUT ON PL LINKS
    function onmouseover_pl(ev){
      var 
        a=indexof(ev.target,arr_pl);
      if (a!=-1 && arr_ro[a]) arr_ro[a].style.opacity=1;
    }
    
    function onmouseout_pl(ev){
      var 
        a=indexof(ev.target,arr_pl);
      if (a!=-1 && arr_ro[a]) arr_ro[a].style.opacity=0.5;
    }
    
    
    // GLOBAL ONMOUSEOVER & ONMOUSEOUT ON RO IMAGES
    function onmouseover_ro(ev){
      var 
        a=indexof(ev.target,arr_ro);
      if (a!=-1 && arr_pl[a]) arr_pl[a].style.backgroundColor="cyan";
    }
    
    function onmouseout_ro(ev){
      var 
        a=indexof(ev.target,arr_ro);
      if (a!=-1 && arr_pl[a]) arr_pl[a].style.backgroundColor="white";
    }
    ...


  •  

    Posting Permissions

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