clickable image

[jaysonyates]

I tryed many sites, and I still can not get my image to become clickable, the text either is on the side, top or bottom, but the text is next over the graphic and clickable, what do I do to make it so.

Thanks

[jaysonyates]

Sorry, I also forgot, I waht the clickable graphic to be one color, and when you move over the graphic it changes color. So IE, mouse not over pix, green, mouse over pix RED. I know that it should be ONMOUSEOVER, but the coding is not working right. Is there an example od that such thing.

Thanks again.

[donnoman]

why don't you post a small example, once we see some of your code we can probably tell you where you are going wrong.

There are two ways to attempt to get the button to change color/image on mousover. One is with java which is what you are referring to. The second is with css and modifying the css for the state of the anchor.

See if this article helps you.

http://www.search-this.com/website_design/css_rollover_buttons.aspx

[jaysonyates]

if you0 go to http://jaysarahandy.com/photos/index.php you will see a graphic surrounding the text, and I can only get the text to be clickable, but not the graphic.

Thanks

why don't you post a small example, once we see some of your code we can probably tell you where you are going wrong.

There are two ways to attempt to get the button to change color/image on mousover. One is with java which is what you are referring to. The second is with css and modifying the css for the state of the anchor.

See if this article helps you.

http://www.search-this.com/website_design/css_rollover_buttons.aspx

[donnoman]

It's because you have set the image to be the BACKGROUND of the cell where your text is.

Code Select Expand


<!-- BEGIN login -->
                                        <td></td>
                                        <td></td>
                                        <td background="themes/canvas/images/button.gif" height="60" width="143">
                                                <a href="login.php?referer=%2Fphotos%2Findex.php">&nbsp;&nbsp;&nbsp;<font color="black">Login</font></a>
                                        </td>
                                        <td></td>
<!-- END login -->


Which is OK, but it means that none of the image is clickable.  Pretty much no way around it if you want the text on top of the image.

you might try:

Code Select Expand


<!-- BEGIN login -->
                                        <td></td>
                                        <td></td>
                                        <td>
                                                <a href="login.php?referer=%2Fphotos%2Findex.php"><div style="background-image:url(themes/canvas/images/button.gif);height:60px;width:143px;">&nbsp;&nbsp;&nbsp;<font color="black">Login</font></div></a>
                                        </td>
                                        <td></td>
<!-- END login -->


that should make a clickable div that has the same image as the background.

totally untested YMMV.

[jaysonyates]

I went instead with an imagemap, it was easier to do then the <div> so this really can be set as:


SOLVED