Computer Science Canada

Transparent links for IE and FireFox?
Author:  Justin_ [ Fri Aug 11, 2006 11:28 pm ]
Post subject:  Transparent links for IE and FireFox?
Hello i have invisible links so as to make certain regions of images clickable. Here is my code to do this minux the css style which i simply used to position it.
HTML:


<div id="link"><a href="somelink.html"><span style="display: block;">&nbsp;</span></a></div>


This renders properly in Firefox but in IE the clickable region is pathetically small. Thanks for any help.
Author:  rdrake [ Sat Aug 12, 2006 12:46 am ]
Post subject: 
So... you're trying to create an image map of sorts?
Author:  Justin_ [ Sat Aug 12, 2006 1:24 am ]
Post subject: 
Exactly, but I forgot to mention I don't use that image map crap, instead I use CSS to map the image.
Author:  [Gandalf] [ Sat Aug 12, 2006 1:58 am ]
Post subject: 
Umm... I don't do a lot of web developing, but that image map seems to work, while your method doesn't. It's also probably a lot simpler than whatever you're doing. Why complicate things unnecissarily?
Author:  Justin_ [ Sat Aug 12, 2006 10:22 am ]
Post subject: 
I can assure you using CSS to map an image is just as simple as using an image map. The CSS portion is working for both IE and Firefox I can tell because the link is positioned fine, now I just need to enlarge it in a way that both IE and FireFox will work.

No one ever done a site with CSS image maping before?
Author:  Amailer [ Mon Aug 21, 2006 6:52 pm ]
Post subject: 
I'm not sure if this is Image Mapping, but I did do this with CSS:
HTML:
<a href="index.html"><span class="home_link">&nbsp;</span></a>



That is in a <div></div> which has the image as its background

css:
.home_link {
        float: right;
        display: block;
        clear: both;

        width: 410px;
        height: 35px;

        text-decoration: none;
}


Thats the um, css for that class. It works on IE,Firefox,Safari,Opera - any other browser I haven't tested it...yet -.-

Though, try it and tell me if it works for you Smile

EDIT1
Problem is, in IE6 at least, when you hover over the link it doesn't change into a hand (like it usually does over other links) insted it stays as a mouse pointer o.O hmm
Author:  cadoo [ Mon Dec 18, 2006 3:39 pm ]
Post subject: 
code:
element {
        cursor: pointer;
        cursor: hand;
}


http://www.quirksmode.org/css/cursor.html

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy