Need to link an image. Will green for help!

Discussion in 'HTML & Website Design' started by aaron_nimocks, Mar 22, 2007.

  1. #1
    I have a header image that is part of a background. Well it also has my logo in it so I want to be able to click it and go back to the homepage. But I cant figure it out.

    Heres my code. Its for a vBulletin forum if that helps.

    <td rowspan="2" width="399" height="134" align="center" style="background: url($stylevar[imgdir_misc]/header_1.jpg);">
    
    HTML:
    Im not that great with these things so if you can give me the code need to link I would appreciate it.
    I look forward to giving you some rep. :)
     
    aaron_nimocks, Mar 22, 2007 IP
  2. joesgraphics

    joesgraphics Peon

    Messages:
    206
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    There are a few ways you could use onclick and some javascript or u could just change the code so its jst a normal img and link code and use css to style it and get it looking right.
     
    joesgraphics, Mar 22, 2007 IP
  3. frankcow

    frankcow Well-Known Member

    Messages:
    4,859
    Likes Received:
    265
    Best Answers:
    0
    Trophy Points:
    180
    #3
    Do this:
    <td rowspan="2" width="399" height="134" align="center" style="background: url($stylevar[imgdir_misc]/header_1.jpg); cursor:pointer;" onclick="javascript:location.href='/';" >
    
    HTML:
    This will take them home when they click, and even make the cursor a hand, so it looks like they're hovering over a link. You could even make the link appear in the status bar, so it really seems like a real link
     
    frankcow, Mar 23, 2007 IP
  4. bacanze

    bacanze Peon

    Messages:
    2,419
    Likes Received:
    127
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You could always just create a hotspot over the image if you wanted, although its not the greatest soultion, it is easy to implement:).

    Ash
     
    bacanze, Mar 23, 2007 IP
  5. frankcow

    frankcow Well-Known Member

    Messages:
    4,859
    Likes Received:
    265
    Best Answers:
    0
    Trophy Points:
    180
    #5
    A hotspot? Do you mean with FireWorks?

    I think he wants HTML code...
     
    frankcow, Mar 23, 2007 IP
  6. bacanze

    bacanze Peon

    Messages:
    2,419
    Likes Received:
    127
    Best Answers:
    0
    Trophy Points:
    0
    #6
    No, I mean with Dreamweaver.

    Edit: Aaron, heres how to implement it if you are not sure: -

    1. Click on the image
    2. Look at the bottom left corner of your Properties dialogue box, usually at the bottom of your screen
    3. You will see three small blue icons, click on which will be most appropriate
    4. Drag a shape over your image
    5. Click this new shape, options will appear below allowing you to specify a link, alt text etc etc.

    Ash :)
     
    bacanze, Mar 23, 2007 IP
  7. junjun

    junjun Peon

    Messages:
    89
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hotspots does not work on background images. Check his code. You need an <img> to associate with imagemaps.
     
    junjun, Mar 23, 2007 IP
  8. humanedited

    humanedited Peon

    Messages:
    747
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Why does the logo have to be part of the header?

    Put a div in the table row, use the header as the background image in the div, then place your logo with link inside of the div and set the positioning.
     
    humanedited, Mar 23, 2007 IP
  9. junjun

    junjun Peon

    Messages:
    89
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #9
    What you could do is move the image away from being a background image, and use it as a regular image instead:
    <td rowspan="2" width="399" height="134" align="center"><img src="$stylevar[imgdir_misc]/header_1.jpg" alt=""></td>
    HTML:
     
    junjun, Mar 23, 2007 IP
  10. bacanze

    bacanze Peon

    Messages:
    2,419
    Likes Received:
    127
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Opps, I should look at the code in the future, my bad. Anway either dont have the image as a background, or absolute postion a div with your logo in over the corresponding image. Although that isnt pratical if you have lots of pages.
     
    bacanze, Mar 23, 2007 IP
  11. frankcow

    frankcow Well-Known Member

    Messages:
    4,859
    Likes Received:
    265
    Best Answers:
    0
    Trophy Points:
    180
    #11
    Oh, I see what you mean. That's not called a hot spot, that's simply an image map, and it doesn't work on background images
     
    frankcow, Mar 23, 2007 IP
  12. frankcow

    frankcow Well-Known Member

    Messages:
    4,859
    Likes Received:
    265
    Best Answers:
    0
    Trophy Points:
    180
    #12
    By the way Aaron, I see you implemented my solution ;)
     
    frankcow, Mar 23, 2007 IP
  13. aaron_nimocks

    aaron_nimocks Im kind of a big deal Staff

    Messages:
    5,563
    Likes Received:
    627
    Best Answers:
    0
    Trophy Points:
    420
    #13
    Ya thanks! :)
     
    aaron_nimocks, Mar 23, 2007 IP