Aureole Posted August 1, 2007 Share Posted August 1, 2007 It looks like I'm posting a huge topic but if you take a quick look it's not really that much...just in case you were thinking OMG. Ok here's the thing I have like... <div id="steps"> <div id="stepone"> </div> <div id="steptwo"> </div> <div id="stepthree"> </div> </div> then the CSS for those divs is... #steps { background: #2C2C2C; width: 900px; height: 46px; margin: 0; padding: 0; } #stepone { background: #2C2C2C url(img/orange/stepone.png) left no-repeat; width: 300px; height: 46px; float: left; margin: 0; padding: 0; } #steptwo { background: #2C2C2C url(img/orange/steptwo.png) left no-repeat; width: 300px; height: 46px; float: left; margin: 0; padding: 0; } #stepthree { background: #2C2C2C url(img/orange/stepthree.png) left no-repeat; width: 300px; height: 46px; float: left; margin: 0; padding: 0; } Now I need to make it so steps 1, 2 and 3 each are a link...the way I have done this is buy making a transparent .png called invisible and doing the following: <div id="steps"> <div id="stepone"> <a href="#"><img src="img/orange/invisible.png" /></a> </div> <div id="steptwo"> <a href="#"><img src="img/orange/invisible.png" /></a> </div> <div id="stepthree"> <a href="#"><img src="img/orange/invisible.png" /></a> </div> </div> While this works perfectly in modern browsers I know there are quite a few that don't support transparent pngs...what can I do. Link to comment https://forums.phpfreaks.com/topic/62848-how-to-make-background-images-be-a-link/ Share on other sites More sharing options...
soycharliente Posted August 1, 2007 Share Posted August 1, 2007 Since you're setting a width and height for each div, give each link a class and set the width and height on it as well. Then, you won't have to use a transparent image and you'll only need a Why can't you just use the image in the link instead of putting it in the background? Link to comment https://forums.phpfreaks.com/topic/62848-how-to-make-background-images-be-a-link/#findComment-312869 Share on other sites More sharing options...
Aureole Posted August 1, 2007 Author Share Posted August 1, 2007 Because I have different styles like orange, red, blue etc. and each one has a different css file and each css file has a different image so I need to keep most of the images in the css. Link to comment https://forums.phpfreaks.com/topic/62848-how-to-make-background-images-be-a-link/#findComment-312870 Share on other sites More sharing options...
Aureole Posted August 1, 2007 Author Share Posted August 1, 2007 The thing with the class with the height and the didn't work... <div id="steps"> <div id="stepone"> <a href="#" class="steps"> </a> </div> <div id="steptwo"> <a href="#" class="steps"> </a> </div> <div id="stepthree"> <a href="#" class="steps"> </a> </div> </div> a.steps:link { height: 46px; width: 300px; margin: 0; padding: 0; } Only the area with the works as a link. Link to comment https://forums.phpfreaks.com/topic/62848-how-to-make-background-images-be-a-link/#findComment-312874 Share on other sites More sharing options...
soycharliente Posted August 1, 2007 Share Posted August 1, 2007 You could "hack" it like this. <html> <head> <style> #imginbg { background: url('magazine_ad.png'); width: 225px; height: 228px; border: 1px solid black; } #imginbg a.foo { padding-right: 222px; padding-bottom: 210px; text-decoration: none; } </style> </head> <body> <div id="imginbg"> <a class="foo" href="#"> </a> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/62848-how-to-make-background-images-be-a-link/#findComment-312881 Share on other sites More sharing options...
Aureole Posted August 1, 2007 Author Share Posted August 1, 2007 I'm not sure how that would work but I'll play around with it a bit, thanks. Link to comment https://forums.phpfreaks.com/topic/62848-how-to-make-background-images-be-a-link/#findComment-312893 Share on other sites More sharing options...
soycharliente Posted August 1, 2007 Share Posted August 1, 2007 I tested it myself on a page. It works. It just makes the link area big enough to cover the image. Link to comment https://forums.phpfreaks.com/topic/62848-how-to-make-background-images-be-a-link/#findComment-312899 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.