Support Forum » Style Master

Adding links to images in CSS

(6 posts)
  • Started 10 months ago by bruce51
  • Latest reply from Storyman

  1. bruce51
    Member

    Probably a stupid question that's been answered before, but I can't find a search function for the forum. Any way to add a link to an image placed as a background? It's easy placing the image in the table cell in Dreamweaver and adding a link, but I can never get the image to consistently be centered in the table or not add extra space, etc.
    Thanks

    Posted: 10 months #

  2. JohnAllsopp
    Member

    Hi Bruce,

    do you have some example code you can point at.

    I'd start the other way - create a link element, then add a background image to it via CSS. Does that help?

    j

    Posted: 10 months #

  3. bruce51
    Member

    Hi John,
    Here's the link to the page on the web site that isn't live yet, but you can see the source code. The red ATV in the upper left table was placed in the cell in Dreamweaver and a link added, but you can see that it isn't centered, even though the code says it should be. The other images are placed in Stylemaster (my first try!) but I don't know how to add a link to them. And because the image wasn't placed in Dreamweaver, it won't accept it. Unless maybe I try to hand code it. I'm an old graphic designer just teaching myself all of this stuff.
    I love the program though.
    Thanks

    Posted: 10 months #

  4. bruce51
    Member

    Forgot the link:
    httphttp://www.buddysmotorsportsandtrailers.com/index-1.html

    Posted: 10 months #

  5. JohnAllsopp
    Member

    Hi Bruce,

    The red ATV is an image element in the HTML. It's wrapped in a link element.

    The other images you've added using style master are background images on the various div elements.

    I'd actually make all the other images, like the scooter, dirt bikes etc, image elements as part of the HTML, not background images using CSS.
    Why?

    Well, CSS is essentially for decoration, bot content and these images are definitely content.

    Does that help?

    thanks

    j

    Posted: 10 months #

  6. Storyman
    Member

    Bruce,

    If I understand correctly you want to use the images as background, but would also like to make the area clickable as a link.

    There are a couple of ways to accomlish this. The general idea is to first create a DIV that uses the graphic as background. Next create a transparent GIF file that is uses as a clickable graphic that is placed inside the DIV.

    You could even get fancy and replace the transparent GIF when hovered with a ring of stars around the vehicle.

    Posted: 10 months #

RSS feed for this topic

Reply

You must log in to post.

0.070 - 9 queries