|
CSS - Create A Border When I Hover Over My Image
i know this is probably a really simple question but i cant think straight and why i cant work it out. when the person hovers over this image i want it to display a border or a certain colour.
Code: #buildings
{
height:195px;
width:280px;
float:left;
margin-left:155px;
margin-top:45px;
}
thats my css i have for this image: Code: <div id="buildings"> <a href="Buildings.php"> <img src="Menu_Images/Buildings.png" width="280" height="195" alt="Buildings" /></a> </div> what would i need to do do ive tried a hover: but that didnt seem to work Similar TutorialsOkay, I know this has been discussed a lot here and I did a lot of searching including reading through ie problem with drop down menu, but I'm still having a heckuva time getting mine to work. Here it is: http://www.jimandkris.com/test/verticalpopout.html When viewing in IE, on any parent menu item with children, it expands downward a few pixels when hovered over. I'm shooting for something like this: http://sperling.com/examples/menuv/ The *html hack isn't fixing it like I hoped. What am I missing? Second, and not as major, in FF my top border (in red) doesn't extend the entire length of the li for either the parent or the children. Thoughts on that? Thanks again! Hi, What would be the best way to create a hover effect as seen on the "Get Started" button he http://themeforest.net/item/mingle-multipurpose-wordpress-theme/full_screen_preview/235056 Thanks! I just got done with the second CSS tutorial for today. Please drop a comment telling me what you think. http://www.majd-gfx.com/tutorials.php?cmd=view&cat=css&id=16 Hi there, I have a table which I want to have a background color on hover. I have tried this: PHP Code: <table style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #888888" width="100%" border="0" cellspacing="0" cellpadding="8"> <tr style="color: #FF7D13;" bgcolor="#f1f1f1"> <td width="25%"><strong>Header 1</strong></td> <td width="25%"><strong>Header 2</strong></td> <td width="25%"><strong>Header 3</strong></td> <td width="25%"><strong>Header 4</strong></td> </tr> <div class="spec" onclick="location.href='#';"> <tr bgcolor="#f1f1f1"> <td width="25%"><strong>Designers</strong></td> <td width="25%">1</td> <td width="25%">2</td> <td width="25%">3</td> </tr> </div> </table> I have given a class to "spec" with a background color, but it doesn't work. Any ideas what is wrong? Hi I have a horizontal menu made from a list. On hovering over the links its supposed to show a yellow bottom border 3px underneath. Works perfectly in everything but IE7. Any ideas please. Hi there, I am trying to create a link which will have a bacground colour appear "around" it when on hover. I currently have a background image, but I tried adding a margin with a background color, but it is not working. This is my code: PHP Code: a.button{ background-image: url('img/button.png'); height: 22px; width: 210px; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #ffffff; text-decoration: underline; padding: 3px 0 0 5px; margin: 20px; } a.button:hover{ background-image: url('img/button.png'); height: 22px; width: 210px; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #ffffff; text-decoration: underline; padding: 3px 0 0 5px; margin: 20px; background-color: #f6f6f6; } Any ideas how I can acheive this? Thanks I followed the online examples pretty closely but for some reason the effect isn't working how it is supposed to. You'll see what i mean he http://www.mr-danny.com/example.html could anybody tell me what i'm doing wrong? Code:
<html>
<head>
<style type="text/css">
ul#menu{
position:relative;
top:163px;
left:405px;
display: inline;
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li{
display:inline;
list-style-type:none;
}
ul#menu li ul.submenu{
display:none;
}
ul#menu li ul.submenu li{
display:block;
}
ul#menu li:hover > ul.submenu{
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li class="home"><a href="" title="">Heading 1</a></li>
<li class="services"><a href="" title="">Heading 2</a>
<ul class="submenu">
<li><a href="" title="">sub 2-1</a></li>
<li><a href="" title="">sub 2-2</a></li>
</ul>
</li>
<li><a href="" title="">Heading 3</a></li>
<li><a href="" title="">Heading 4</a>
<ul class="submenu">
<li><a href="" title="">sub 4-1</a></li>
<li><a href="" title="">sub 4-2</a></li>
</ul>
</li>
<li><a href="" title="">Heading 5</a>
<ul class="submenu">
<li><a href="" title="">sub 5-1</a></li>
<li><a href="" title="">sub 5-2</a></li>
</ul>
</li>
</ul>
</body>
</html>
I'm having a funky issue with a page in IE. I've got tables and have css setting the border properties of cells in the table. My issue is when mousing over Anchors in td's in the table the borders of the td's will sometimes dissapear. Its just funky. Its doing it on 2 different machines running IE6 ...Has anyone esle seen this? Is this some variant of the Guillotine Bug? Hi Guys, I am having trouble working out how to line up the hover background image with the background image for a mouseover effect. It is currently putting the hover BG image ''x.gif' over the text instead of in the same position as 'bullet.gif' HTML ---------- <div id="vertmenu"> <ul> <li><a href="#" tabindex="1">Home</a></li> <li><a href="#" tabindex="2">About Us</a></li> <li><a href="#" tabindex="3">Computing</a></li> <li><a href="#" tabindex="4">Web Sites</a></li> <li><a href="#" tabindex="5">Games</a></li> <li><a href="#" tabindex="6">Links</a></li> </ul> </div> CSS ---------- PHP Code: #navcontainer ul { list-style-type: none; text-align: left; } #navcontainer ul li a { background: transparent url(images/bullet.gif) left center no-repeat; padding-left: 15px; text-align: left; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; color:#33CC00; font-weight:bold; text-decoration: none; color: #999; border-bottom: 1px dashed #FF9933; } #navcontainer ul li a:hover { background: transparent url(images/x.gif) left center no-repeat; color: black; border-bottom: 1px dashed #FF9933; } #navcontainer ul li a#current { background: transparent url(images/x.gif) left center no-repeat; color: #666; border-bottom: 1px dashed #FF9933; } I am wanting to add an hover option to my pictures and can not get it to work. I have each picture in a box div and was wondering how to add an hover to it. The link to the website is:-brushing with greatness. I just want the whole box to light up when you hover over the image. Would i have to use javascript or can i do this completely with css? Many thanks in advance. Code: #middleschool-image {
position:absolute;
left:498px;
top:389px;
width:274px;
height:86px;
}
.middleschool-image a:hover img {
background-image: url(images/mid_school_ovr.jpg);
}
Am I missing something? When I mouse-over nothing happens... Hello, I am trying to get two image links (that look like tabs) to get to work on my web page. What I want to have is a tab that when a user hovers over it, the background image appears (just a different version of the original image). So my HTML is: Code:
<table>
<tr>
<td><a class="flights"><img src="/images/buttons/f.gif"></a></td>
<td><a class="vacations"><img src="/images/buttons/v.gif"></a></td>
</tr>
<table />
and my CSS is: Code:
.flights {
background:url(/images/buttons/f_h.gif) center top no-repeat;
width: 78px;
height: 41px;
/* background-image: url(/images/buttons/f_h.gif); */
margin-right: 1px;
}
.flights:hover img {
visibility: hidden;
}
.vacations {
/* background:url(/images/buttons/v_h.gif) top left no-repeat; */
background-image: url(/images/buttons/v_h.gif);
}
For some reason in FF (have not tested in IE) the background image sticks out a little at the bottom even though both images used are exactly the same size. Then when I hover over the tab, its background image appears but it is about halfway down from the foreground image. Any insights as to why this might be happening? I'd better admit right off the bat that I'm a total moron at this stuff. Here's the site I'm working on (I apologize for the geocities ads - I don't want to buy hosting until I'm ready to roll with the page). http://www.geocities.com/dbot69/page1.html It does pretty much exactly what I want it to do through firefox, but it's all messed up on internet explorer. Is there any way I can get it to be compatible? I got the css code from this website (it's down but here's the google cache link): http://66.102.7.104/search?q=cache:na1aQDyoijkJ:www.frankmanno.com/ideas/css-imagemap/+CSS+Image+Maps+-+Flickr-like+Technique&hl=en&client=firefox-a then I tailored the code to do what I'm trying to do. But I'm probobly just doing it stupidly seeing as I have no clue what I'm doing. I got the following error when i tried to validate my code: "Line: 21 Parse error - Unrecognized " (it said other stuff, but it wouldn't let me make the post with that other stuff included) I don't really know what that error means though or how to fix it Any help anyone could give me would be greatly appreciated! Thanks! Rob Hi there, I am looking for a way to display a 'translucent' layer on top of an image when hovered on. Is this possible? I guess I can do it with a PNG, but this onl;y works in IE right? Any ideas? Hi, I have a menu of made of images, each one is a link to a certain page. I want to replace the current image with a new slightly different image when the user hovers on it. I have 5 menu items so 10 images. My question is, can I do this in CSS without having to make a CSS rule for each image? Thanks in advance I have seen it once but cannot find it. What I am looking for is a script or stylesheet code that when the mouse is over an image that is a link, a large size of that image will appear as a popup and disappear when mouse is removed, how do I do it or when can I find it. Thanks Tim I'm still relatively new to this whole homepage thing. I was wondering if its possible using only CSS to make this happen: i have a bunch of headings along the top of a page that a person can click on. Below is a box with an image. I would like a different image to appear in that box when a differnt heading above is hovered over. Is this javascript stuff ?:S (havnt started learning that yet) tanks, matt. Hi, I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ? Here is the code I have now. <a href="javascript:undefined" id="imageLinkId">GMNA</a> <script language="javascript"> if( ... ) { document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); } else { document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); } </script> Thanks That's what a friend of mine is trying to do to her blog. She's been trying for the longest time to get the hover command to change some link text color into a gif image, but all she can manage is the background behind the text. If you don't get what I'm trying to say, this is a screen cap of what she has right now: img801.imageshack.us/i/screencap.png/ Basically, she want's to know if there's a way so that, rather than having the gif around her text, it would display inside of her text only so that the words would look like static. If anyone knows if this is even possible, please help me out. Thanks in advance. I am using a CSS hover image enlarge which when you hover over a thumbnail, it then shows the large version. It works fine in IE7 onwards, but in IE6 the enlarged image is now showing at all when you hover over the thumbnail. Can anyone help? here is the HTML Code: <div id="side-b"> <div class="news-box-container"> <div class="sidebar"><img src="includes/side2barsmall.jpg" alt="" /></div> <div class="news-box"> <div class="staffpics"> <a class="p1" href="#" title=""><img src="includes/staffone.jpg" title="" alt="" /> <img class="large" src="includes/staffonelarge.jpg" title="" alt="" /></a> </div><!-- end staffpics --> </div><!-- end news-box --> <div class="sidebar"><img src="includes/side2barsmall.jpg" alt="" /></div> </div><!-- end news-box-container --> </div><!-- end side b --> here is the CSS Code: .staffpics {
width:96px;
}
.staffpics a.p1, a.p1:visited {
width:96px; height:78px; border:0px none;
}
.staffpics a img {
border:0px none;
}
.staffpics a.p1:hover {
color:#000;
}
.staffpics a .large {
position:absolute; width:0; height:0; border:0px none; top:0; left:0; padding:0px
}
.staffpics a.p1:hover .large {
position:absolute; top:125px; left:400px; width:300px; height:243px; border:10px solid #FABA32; padding:0px;
}
|
|||||||