#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17

    How Can I Make This A Clickable Link?


    So I have a picture gallery/menu thing and I'm TRYING to make the list item actually clickable but I don't know how.

    It's probably easier to show you so on this page, I want the graphic that says 'click me!' to actually be a working link like you would expect from a menu item.
    http://www.thespinzone.com/temp/devcss.php

    Of course you can view the source to see the code but...
    The relevant css is:
    Code:
    #container {position:relative; width:204px; height:530px; margin:0px auto 0 auto; border:0px solid #aaa; 
    background-image:url(portmenubg1.jpg) left no-repeat;}
    
    #container ul {width:204px; height:530px; padding:0;  margin:0px; list-style-type:none; float:right;}
    
    #container li {float:left;}
    
    #container a.gallery span {position:absolute; width:1px; height:1px; top:1px; left:5px; overflow:hidden; 
    background:#4C697B;}
    
    
    container a.slideb, #container a.slideb:visited {background:url(pb.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:34px 0px 24px 42px; text-align:left; cursor:default;}
    #container a.slidec, #container a.slidec:visited {background:url(pc.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:20px 2px 22px 4px; text-align:left; cursor:default;}
    #container a.slided, #container a.slided:visited {background:url(pd.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 80px; text-align:left; cursor:default;}
    #container a.slidee, #container a.slidee:visited {background:url(pe.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 8px; text-align:left; cursor:default;}
    #container a.slidef, #container a.slidef:visited {background:url(pf.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 46px; text-align:left; cursor:default;}
    
    #container a.gallery,slideb:hover {height:54px; width:120px;}
    
    #container a.slideb:hover {background:url(pclickme.jpg); border:0px solid #fff;}
    #container a.slidec:hover {background:url(pclickme.jpg); border:0px solid #fff;}
    #container a.slided:hover {background:url(pclickme.jpg); border:0px solid #fff;}
    #container a.slidee:hover {background:url(pclickme.jpg); border:0px solid #fff;}
    #container a.slidef:hover {background:url(pclickme.jpg); border:0px solid #fff;}
    #container a.gallery:hover span {position:absolute; width:300px; height:200px; top:10px; left:204px; color:#000; background:#fff;}
    #container a.gallery:hover img {border:1px solid #000; float:left; margin-right:5px;}
    #container a.slideb:hover img, #container a.slidei:hover img {float:right;}
    and the html is:
    Code:
    <div id="container">
    <ul>
    <li><a class="gallery slideb" href="#nogo"><span><img src="pb1.jpg" alt="clickme" title="B" /></span></a></li>
    <li><a class="gallery slidec" href="#nogo"><span><img src="pc2.jpg" alt="clickme" title="C" /></span></a></li>
    <li><a class="gallery slided" href="#nogo"><span><img src="pd1.jpg" alt="clickme" title="D" /></span></a></li>
    <li><a class="gallery slidee" href="#nogo"><span><img src="pe1.jpg" alt="clickme" title="E" /></span></a></li>
    <li><a class="gallery slidef" href="#nogo"><span><img src="pf1.jpg" alt="clickme" title="F" /></span></a></li>
    </ul>
    </div>
  2. #2
  3. Standing 3 feet to the left.
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2006
    Location
    USA
    Posts
    1,428
    Rep Power
    189
    You mean you want them to change pages when clicking on the image, right?

    Why not just put the address into the href attribute in the <a> tag? Or are you trying to make the <li> tag clickable? (Which, in this situation, looks like it would do the same as making the <a> clickable.)
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    You can do this by css alone, by using :target but the support for that CSS3 selector is very limited. Currently just Firefox and Safari support it.

    http://www.w3.org/Style/Examples/007/target.html
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17
    Originally Posted by Tukaro
    You mean you want them to change pages when clicking on the image, right?

    Why not just put the address into the href attribute in the <a> tag? Or are you trying to make the <li> tag clickable? (Which, in this situation, looks like it would do the same as making the <a> clickable.)
    Well, I'd want to be able to click on the graphic that says 'click me!' and yes, have it change pages...to for example 'somepage.php'. I tried putting a link in the a tag and then the li tag, but neither works and I'm not sure why...???
  8. #5
  9. Standing 3 feet to the left.
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2006
    Location
    USA
    Posts
    1,428
    Rep Power
    189
    Er...
    html4strict Code:
    <li>
       <a class="gallery slideb" href="somepage.php">
          <span><img src="pb1.jpg" alt="clickme" title="B" /></span>
       </a>
    </li>
    Is that what you tried? I have absolutely no idea why that wouldn't work. If that's not what you tried, can you post the code you tried with?
  10. #6
  11. Standing 3 feet to the left.
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2006
    Location
    USA
    Posts
    1,428
    Rep Power
    189
    Originally Posted by Akh
    You can do this by css alone, by using :target but the support for that CSS3 selector is very limited. Currently just Firefox and Safari support it.
    Oooooh. mytwocents, you're trying to do anchor links? Now I understand. I thought the #nogo was just a placeholder. In that case, Akh's information is much more useful than mine.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17
    Originally Posted by Tukaro
    Er...
    html4strict Code:
    <li>
       <a class="gallery slideb" href="somepage.php">
          <span><img src="pb1.jpg" alt="clickme" title="B" /></span>
       </a>
    </li>
    Is that what you tried? I have absolutely no idea why that wouldn't work. If that's not what you tried, can you post the code you tried with?
    That's exactly what I tried....and it didn't work...I replaced the "#nogo" with "somepage.php" in the code I posted above...and it doesn't work....and I don't have any idea why either
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    260
    Rep Power
    17
    Originally Posted by Tukaro
    Oooooh. mytwocents, you're trying to do anchor links? Now I understand. I thought the #nogo was just a placeholder. In that case, Akh's information is much more useful than mine.
    No....I'm not trying to do anchor links...it was just a placeholder....

IMN logo majestic logo threadwatch logo seochat tools logo