SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover linking problem.

    Im using this code to rollover some images.

    Code:
    /*--- Left Navigation rollover --- */
    #Lrollover {
    width:150px;
    margin:auto;
    }
    #Lrollover a {
    text-decoration:none;
    color:#ffffff;
    background-color:transparent;
    display:block;
    font-size:1em;
    font-weight:bold;
    }
    #Lrollover li {
    float:left;
    width:150px;
    }
    #Lrollover h2 {
    height:100px;
    margin:0;
    padding:0;
    }
    #Lrollover h2 img {
    display:block;
    }
    #Lrollover #a h2 {
    background-image:url(menuimages/menuleftover_01.gif);
    background-repeat:no-repeat;
    height: 94px;
    }
    #Lrollover #b h2 {
    background-image:url(menuimages/menuleftover_02.gif);
    background-repeat:no-repeat;
    height: 108px;
    }
    #Lrollover #c h2 {
    background-image:url(menuimages/menuleftover_03.gif);
    background-repeat:no-repeat;
    height: 70px;
    }
    #Lrollover li:hover h2 img, #Lrollover li.sfhover h2 img {
    display:none;
    }
    #Lrollover li ul {
    display:none;
    }
    #Lrollover li:hover ul, #Lrollover li.sfhover ul {
    display:block;
    }
    #Lrollover li ul li:hover a, #Lrollover li ul li.sfhover a{
    background-color:#ffffff;
    color:#333333;
    }
    /*--- Left Navigation rollover --- */
    
    /*--- Right Navigation rollover --- */
    #Rrollover {
    width:150px;
    margin:auto;
    }
    #Rrollover a {
    text-decoration:none;
    color:#ffffff;
    background-color:transparent;
    display:block;
    font-size:1em;
    font-weight:bold;
    }
    #Rrollover li {
    float:RIGHT;
    width:150px;
    }
    #Rrollover h2 {
    height:100px;
    margin:0;
    padding:0;
    }
    #Rrollover h2 img {
    display:block;
    }
    #Rrollover #d h2 {
    background-image:url(menuimages/menuoverright_01.gif);
    background-repeat:no-repeat;
    height: 94px;
    }
    #Rrollover #e h2 {
    background-image:url(menuimages/menuoverright_02.gif);
    background-repeat:no-repeat;
    height: 108px;
    }
    #Rrollover #f h2 {
    background-image:url(menuimages/menuoverright_03.gif);
    background-repeat:no-repeat;
    height: 70px;
    }
    #Rrollover li:hover h2 img, #Rrollover li.sfhover h2 img {
    display:none;
    }
    #Rrollover li ul {
    display:none;
    }
    #Rrollover li:hover ul, #Rrollover li.sfhover ul {
    display:block;
    }
    #Rrollover li ul li:hover a, #Rrollover li ul li.sfhover a{
    background-color:#ffffff;
    color:#333333;
    }
    /*--- Right Navigation rollover --- */
    
    /*--- Left column --- */
    #leftnav{
    	float:left;
    	width:160px;
    	margin:0;
    	margin-top:35px;
    	padding:1px;
    	font-family:Verdana, Arial, SunSans-Regular, Sans-Serif;
    	font-size:15px;
    	}
    
    /*--- Left column --- */
    
    /*--- Right column --- */
    #rightnav{
    	float:right;
    	width:160px;
    	margin:0;
    	padding:1em;
    	}
    
    /*--- Right column --- */
    This is the html:

    HTML Code:
          <div id="leftnav">
            <ul id="Lrollover">
                <a href="bio.htm"><li id="a"><h2><img src="menuimages/menuleft_01.gif" alt="" /></h2></a>
              </li>
              <li id="b">
                <a href="discography.htm"><h2><img src="menuimages/menuleft_02.gif" alt="" /></h2></a>
              </li>
              <li id="c">
                <a href="lyrics.htm"><h2><img src="menuimages/menuleft_03.gif" alt="" /></h2></a>
              </li>
            </ul>
          </div>
          <div id="rightnav">
            <ul id="Rrollover">
              <li id="d">
                <a href="multimedia.htm"><h2><img src="menuimages/menuright_01.gif" alt="" /></h2></a>
              </li>
              <li id="e">
                <a href="/forum"><h2><img src="menuimages/menuright_02.gif" alt="" /></h2></a>
              </li>
              <li id="f">
                <a href="links.htm"><h2><img src="menuimages/menuright_03.gif" alt="" /></h2></a>
              </li>
            </ul>
          </div>
    Well, that's the only way I found to link the image after the rollover, but the problem is its not valid xhtml cause a block-level (h2 here) element cannot be inside an inline element (such as a in my code). Does anybody know another way to link the image after rollover?

    Thank you.

  2. #2
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, on IE rollover doesnt work, and neither links :S

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think i know how to fix it and make it work on ie too, i will use a single image for each button and put somethint like background-position: 0 -XXpx; to change it. Well need to go out now, i will try it in 3 or 4 hours and if it work i'll post it here.

  4. #4
    Chillin like a Villain DaStuff's Avatar
    Join Date
    Jul 2003
    Location
    Huntington Beach
    Posts
    649
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok well on a side note... I'm not sure if this is exactly what you want but it may help... This is a little code from Golgotha (which I've used and works excellently)...

    Basically it's a css rollover image link... So you can chose the active an unactive image, and link it somewhere...

    http://www.search-this.com/website_d...r_buttons.aspx

    Pretty straight forward, it just may take a little fooling around with.
    • Follow the dancing banana

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got something similar I've done myself, lemme re-work it here into what you are trying to do (or something reasonably close)...

    Mine works on MANY levels - much like the 'trifecta' buttons DaStuff linked to, but a bit simpler in implementation while doing more... I suppose you could call it the Perfecta (hmm, I like that.)

    by manipulating the A tag to become a block level element the size of your picture, then displaying the image as the background covers your hovers... it includes the title so mouse-overs show something relevant - then there's the trick I do with the bold tag. By setting it uber-tiny it won't give you overflow issues, visibility:hidden hides the text in it without the issues display:none has, and it lets you put an actual TEXT link in meaning non-CSS browsers have something to look at (search engine spyders, text parsers)

    The CSS
    Code:
    #menu_a { 
      display:block;
      width:150px;
      height:50px;
      padding:0px;
      margin:0px;
      text-decoration:none;
      background:url('button.gif') left top no-repeat;
    }
    
    #menu_item:hover {
      background-image:url('hover_button.gif')
    }
    
    #left_column a b, #right_column a b {
      display:inline;
      float:left;
      padding:0px;
      margin:0px;
      font-size:1px;
      visibility:hidden;
    }
    The HTML
    <a id="menu_item" href="URL" title="YourButtonName"><h1>YourButtonName</h1></a>


    So, how to work this into your page... I think it would go something like this:

    CSS
    Code:
    #left_column, #right_column{
      width:150px;
      margin:35px 0px 0px 0px;
      padding:1px;
    }
    
    #left_column {
      float:left;  
    }
    
    #right_column{
      float:right;
    }
    
    #left_column a, #right_column a {
      display:block;
      width:150px;
      height:100px;
      padding:0px;
      margin:0px;
      background:left top no-repeat;
      text-decoration:none;
    }
    
    #left_column a b, #right_column a b {
      display:inline;
      float:left;
      padding:0px;
      margin:0px;
      font-family:sans-serif;
      font-size:10px;
      visibility:hidden;
    }
    
    #menu_a { background-image:url('menuimages/menuleft_01.gif');  }
    #menu_a:hover {  background-image:url('menuimages/menuoverleft_01.gif') }
    
    #menu_b { background-image:url('menuimages/menuleft_02.gif');  }
    #menu_b:hover {  background-image:url('menuimages/menuoverleft_02.gif') }
    
    #menu_c { background-image:url('menuimages/menuleft_03.gif');  }
    #menu_c:hover {  background-image:url('menuimages/menuoverleft_03.gif') }
    
    #menu_d { background-image:url('menuimages/menuleft_04.gif');  }
    #menu_d:hover {  background-image:url('menuimages/menuoverleft_04.gif') }
    
    #menu_e { background-image:url('menuimages/menuleft_05.gif');  }
    #menu_e:hover {  background-image:url('menuimages/menuoverleft_05.gif') }
    
    #menu_f { background-image:url('menuimages/menuleft_06.gif');  }
    #menu_f:hover {  background-image:url('menuimages/menuoverleft_06.gif') }
    HTML
    Code:
    <div id="left_column">
      <a id="menu_a" href="bio.htm" title="Biography"><b>Biography</b></a>
      <a id="menu_b" href="discography.htm" title="Discography"><b>Discography</b></a>
      <a id="menu_c" href="lyrics.htm" title="Lyrics"><b>Lyrics</b></a>
    </div>
    
    <div id="right_column">
      <a id="menu_d" href="multimedia.htm" title="Multimedia"><b>Multimedia</b></a>
      <a id="menu_e" href="/forum" title="Forums"><b>Forums</b></a>
      <a id="menu_f" href="links.htm" title="Links"><b>Links</b></a>
    </div>
    Simple, works like a charm.

    and if you REALLY want the unordered lists, that CAN be folded in, just do it AROUND the anchor tags; in which case I'd probably drop the container DIV as assign the id="___column" to the two UL's... and be sure to change all the "#left_column a" and "#right_column a" to "#left_column li a" and "#left_column li a"

  6. #6
    Chillin like a Villain DaStuff's Avatar
    Join Date
    Jul 2003
    Location
    Huntington Beach
    Posts
    649
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooo... So pretty, I may have to try some of that goodness

    Yah after i finally got my trifecta i was tired and never changed it... But Perfecta looks pretty sweet, maybe it's time for a little update.
    • Follow the dancing banana

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just made some changes to it after you posted. I switched to h1 because his example was using them instead of my original bold - forgetting the thing he mentioned in his own post - you cannot put headers inside anchors. DOH!


Bookmarks

Posting Permissions

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