KDM Posted June 2, 2011 Share Posted June 2, 2011 How would I make an image be displayed when someone rolls over a text link? I'll want the image displayed behind the text link. Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/ Share on other sites More sharing options...
teynon Posted June 2, 2011 Share Posted June 2, 2011 <a href="blah" class="link">My Link</a> <style> .link { background-image: none; } .link hover { background-image: url(images/myimage.png); } </style> Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1224152 Share on other sites More sharing options...
monkeytooth Posted June 2, 2011 Share Posted June 2, 2011 I would wrap my link in a DIV and use a padding to sit the text where I would want it to sit.. then follow suit similar to what was mentioned by teynon said, however since your wanting the text to remain and have a background change behind it you may require a little more than just purely css, I could be wrong but Im going to say this is a rather easy task with a bit of javascript, might I suggest jQuery for your library so you don't have to worry about some issues of cross browser compliance going the route of standard javascript alone. Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1224335 Share on other sites More sharing options...
KDM Posted June 2, 2011 Author Share Posted June 2, 2011 can you explain the use of javascript along with the code he posted? Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1224352 Share on other sites More sharing options...
KDM Posted June 2, 2011 Author Share Posted June 2, 2011 Here is a good sample of what I'm talking about. https://www.mint.com/how-it-works/ Look at the nav menu on the left. I tried looking at it in firefox. I don't know what I'm doing . Can someone get the styles for this and show me? Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1224359 Share on other sites More sharing options...
monkeytooth Posted June 3, 2011 Share Posted June 3, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Change Example</title> <style type="text/css" media="all"> #sample{list-style:none;width:140px;height:30px;} #sample li{margin:0;padding:5px;} #hiddenElement{background-image:url(example.jpg);position:absolute;left:-999em;} /*just so the image is loaded in a cache*/ </style> </head> <body> <ul id="sample"> <li><a href="#link" class="over">Example</a></li> <li><a href="#link" class="over">Example</a></li> <li><a href="#link" class="over">Example</a></li> <li><a href="#link" class="over">Example</a></li> </ul> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.over').mouseover(function(){$(this).parent('li').css({'background-color':'#000'});}); $('.over').mouseout(function(){$(this).parent('li').css({'background-color':'#FFF'});}); }); </script> <div id="hiddenElement"></div> </body> </html> Not 100% the best example and can be optimized a little but in all works for the general purpose http://chrishacia.com/demo/change.html also the example though set up and primed for an image doesn't actually use it in the example, thats lazyness on my part but a couple quick edits and that can be fixed. This example makes use of HTML's "unordered list" element and jQuery Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1224466 Share on other sites More sharing options...
teynon Posted June 3, 2011 Share Posted June 3, 2011 Just use display: block; on the link class, then set the width and height of the link box to show the image behind it. Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1224549 Share on other sites More sharing options...
KDM Posted June 3, 2011 Author Share Posted June 3, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Change Example</title> <style type="text/css" media="all"> #sample{list-style:none;width:140px;height:30px;} #sample li{margin:0;padding:5px;} #hiddenElement{background-image:url(example.jpg);position:absolute;left:-999em;} /*just so the image is loaded in a cache*/ </style> </head> <body> <ul id="sample"> <li><a href="#link" class="over">Example</a></li> <li><a href="#link" class="over">Example</a></li> <li><a href="#link" class="over">Example</a></li> <li><a href="#link" class="over">Example</a></li> </ul> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.over').mouseover(function(){$(this).parent('li').css({'background-color':'#000'});}); $('.over').mouseout(function(){$(this).parent('li').css({'background-color':'#FFF'});}); }); </script> <div id="hiddenElement"></div> </body> </html> Not 100% the best example and can be optimized a little but in all works for the general purpose http://chrishacia.com/demo/change.html also the example though set up and primed for an image doesn't actually use it in the example, thats lazyness on my part but a couple quick edits and that can be fixed. This example makes use of HTML's "unordered list" element and jQuery Thanks. Can you tell me how to get the background image to work. I replace example.jpg with my desired background and nothing. I'm assuming the background info goes here... $('.over').mouseover(function(){$(this).parent('li').css({'background-color':'#000'});}); How do I write it like this? $('.over').mouseover(function(){$(this).parent('li').css({'background-image:url ':'bg.jpg'});}); Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1224600 Share on other sites More sharing options...
cssfreakie Posted June 3, 2011 Share Posted June 3, 2011 Apart from using jquery for reasons mentioned above (cross browser compatibility, which is just not true, unless you target IE6 and lower, and that is only to mimic the pseudo hover) (interesting enough 8 posts down this same person asks how to do this with css...) Teynon already provided code that almost worked with just css. except that it should be .link:hover and not .link hover for more info have a read on the pseudo hover class. <style type="text/css"><!-- dont forget to give a type attribute! --> .link { background-image: none; } .link:hover { background-image: url(images/myimage.png); } </style> Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1224666 Share on other sites More sharing options...
KDM Posted June 3, 2011 Author Share Posted June 3, 2011 Apart from using jquery for reasons mentioned above (cross browser compatibility, which is just not true, unless you target IE6 and lower, and that is only to mimic the pseudo hover) (interesting enough 8 posts down this same person asks how to do this with css...) Teynon already provided code that almost worked with just css. except that it should be .link:hover and not .link hover for more info have a read on the pseudo hover class. <style type="text/css"><!-- dont forget to give a type attribute! --> .link { background-image: none; } .link:hover { background-image: url(images/myimage.png); } </style> This code is not working. My background image does not show. Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1224887 Share on other sites More sharing options...
cssfreakie Posted June 4, 2011 Share Posted June 4, 2011 KDM, do you have what you tried online? this code should just works. but i am pretty sure you just copy pasted it without thinking, and declared it not working, without checking the path to the image. Which is pretty vital. So if you could provide us with a a link to your on line example (you tested it right?) and the right path (or link) to the image we might be able to fix it in your circumstances. for now 'not working' tells us nothing. Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1224948 Share on other sites More sharing options...
teynon Posted June 4, 2011 Share Posted June 4, 2011 I tested this on my desktop. <html> <head> <style> a { background-image: none; display: block; width: 200px; height: 200px; } a:hover { background-image: url(LeftTurn.png); } </style> </head> <body> <a href="#">My Link</a> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225204 Share on other sites More sharing options...
gospabode2 Posted June 4, 2011 Share Posted June 4, 2011 The Code you just posted seemed to be working when I tested it. Do you still have an issue and if so, what? [attachment deleted by admin] Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225209 Share on other sites More sharing options...
teynon Posted June 5, 2011 Share Posted June 5, 2011 Nice cat. But i'm not he one with the problem. Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225300 Share on other sites More sharing options...
cssfreakie Posted June 5, 2011 Share Posted June 5, 2011 it's indeed a nice cat but seriously check the path! Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225304 Share on other sites More sharing options...
gospabode2 Posted June 5, 2011 Share Posted June 5, 2011 Whoops Sorry, Teynon, Guess I got a little overexcited! Now I know why trashcat is not amused. Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225321 Share on other sites More sharing options...
KDM Posted June 5, 2011 Author Share Posted June 5, 2011 Thanks for the help guys I got the code working. Here's an online example http://capitolinvestmententerprises.com/test.html I'm going to replace my old menu shown on the main page, with my new css nav menu. The old one used image swap rollovers. Not really a good way to do this type of menu. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> a { background-image: none; display: block; padding-top:15px; padding-left:10px; width: 217px; height: 54px; background-repeat: no-repeat; } a:hover { background-image: url(assets/images/navLinksBG.png); } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <a href="#">My Link</a> <a href="#">My Link2</a> </body> </html> How do I make so that EVERY link does not have this rollover background? Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225586 Share on other sites More sharing options...
cssfreakie Posted June 5, 2011 Share Posted June 5, 2011 well that is pretty much the basics of css. you need to assign a class to the link. so for instance you have a class of monkeys. in your style sheet you than put it like this: a.monkeys{ /* some effect*/ } in html you do <a class="monkeys" href="lalala.html" /> so now all links with the class of monkeys get that style Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225587 Share on other sites More sharing options...
KDM Posted June 5, 2011 Author Share Posted June 5, 2011 well that is pretty much the basics of css. you need to assign a class to the link. so for instance you have a class of monkeys. in your style sheet you than put it like this: a.monkeys{ /* some effect*/ } in html you do <a class="monkeys" href="lalala.html" /> so now all links with the class of monkeys get that style Ok I have this now a.navLinks { background-image: none; display: block; padding-top:15px; padding-left:10px; width: 217px; height: 54px; background-repeat: no-repeat; } How would I write the hover css? a:hover.navLinks I'm guessing. Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225597 Share on other sites More sharing options...
teynon Posted June 5, 2011 Share Posted June 5, 2011 a.navLinks:Hover Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225612 Share on other sites More sharing options...
KDM Posted June 5, 2011 Author Share Posted June 5, 2011 a.navLinks:Hover I got it working now, thanks. One thing I don't understand is why this didn't work? <a href="#" class="a.navLinks">Website Hosting</a><br /> But this did <a href="#" class="navLinks">Website Hosting</a><br /> Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225627 Share on other sites More sharing options...
teynon Posted June 5, 2011 Share Posted June 5, 2011 a.classLinks The a before the . refers to a tag in css. for example: p.classLinks references <p> with classname of "classLinks" img.monkeys references <img with classname of "monkeys" div.lala references <div> with class name of "lala" Quote Link to comment https://forums.phpfreaks.com/topic/238178-rollover-links-with-images/#findComment-1225629 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.