|
CSS - Hover Link On Image Mouseover
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 Similar TutorialsGreetings I'm sure if I was cleverer I could figure this out for myself, but... Also if I could figure out what the last person who more than likely already got an answer about this topic called it in their post, I might have found it in the search, but... So, what I'm trying to do is this: I have a grid of images that link to a series of pages. To the right there is a standard navagation menu that also links to the same pages, and has a hover background color. What I (and by "I" I really mean the person who I am building this for, since I wouldn't do it this way, but...) want to have happen is that when you mouseover the images they highlight the corresponding links in the navagation menu. here is the css: Code: // the image grid
#left {
float: left;
height: auto;
text-align: center;
width: 810px;
}
#left ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#left img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#left ul li {
text-align: center;
width: auto;
float: left;
margin-right: 15px;
height: 200px;
margin-bottom: 15px;
}
#left ul li a {
text-decoration: none;
color: #000000;
display: block;
}
// the nav menu
#right {
height: auto;
width: 150px;
float: left;
}
#right ul {
width: 150px;
list-style-type: none;
margin: 0px;
padding: 0px;
float: right;
}
#right ul li {
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
}
#right ul li a {
text-decoration: none;
color: #000000;
line-height: 38px;
width: 135px;
display: block;
padding-right: 15px;
}
a.home:hover {
background-color: #C6CED0;
}
a.bio:hover {
background-color: #B4C2A1;
}
a.gallery:hover {
background-color: #B4B281;
}
a.review:hover {
background-color: #9A8F62;
}
a.current:hover {
background-color: #AF8459;
}
a.past:hover {
background-color: #AA8050;
}
a.contact:hover {
background-color: #8A9B93;
}
...and here is the html: Code: <div id="left">
<ul>
<li><a href="gallery_landscape.html"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
<li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
<li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
<li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
<li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
<li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
</ul>
</div>
<!--end left -->
<div id="right">
<ul>
<li><a class="home" href="armin.html">Home</a></li>
<li><a class="bio" href="#">Landscape</a></li>
<li><a class="gallery" href="#">Plein-Air</a></li>
<li><a class="review" href="#">Non-Objective</a></li>
<li><a class="current" href="#">The Figure</a></li>
<li><a class="past" href="#">The West</a></li>
<li><a class="contact" href="#">Comics</a></li>
</ul>
</div>
<!--end right -->
Sorry for the long post, but I hope that makes sense... Thanks in advance for any help. Hi. I have just recently begun working with CSS. Is it possible with CSS (and without the use of any JavaScript) to have the background image change on a link mouseover? I have the first image below (blue.jpg) set as my default background image and would like the second image (blue1.jpg) to display when the user hovers over a particular link. URL URL Thanks for any help anyone can offer I want a background image on an element that is a specific size where the background changes when hovered and the element functions as a link. I don't want text for the link to be visible. I tried doing this as an a tag but the background is only visible for the height of the text unless I make the text huge and then make it transparent and that doesn't work in IE as the text is still visible I want it to be a specific width and height. It is on the opposite side of a nav bar from my main nav that is a horizontal list so I want is to retail the size of my nav. I don't want the background to be two different images for plain and hover so I was using background placement and moving the bg image on hover. I thought I could then do this as a single li but I have not had success. What is the simplest way to achieve this? I would like to keep the text somehow for accessibility but not have it visible. please please somebody help me with this... i have given my links some effects with this code: Code: <style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}
a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>
it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters. Thanks! I have a thumbnail image with a link below. When hovering over the link, I want the enlarged image to pop up. I've tried it 2 ways. Both are close, but neither works the way I want it. Perhaps someone can help tweak one of these options? Option 1 is he http://concrete-creative.com/temp/print/1.html **What I don't like here is that you can hover over a big, blank area below the link and the larger image pops up. I only want the linked text [JACK IT UP] to pop the larger image up. Option 1_B is he http://concrete-creative.com/temp/print/1_B.html **The problem here is the the larger image while INVISIBLE is sitting below the text [JACK IT UP] which is pushing my HTML table too wide. Can someone help me find the happy medium between these 2 solutions so it works the way I want it to? THANKS! Hi everyone, I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not. I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website (just remove the *) *onholdmusicsource*.com In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button. Comments would be fine Ideas would be great Solutions would be fantastic Many Thanks- Hi, I have made a simple table in html, with mouseover on the rows to change the background colour. I also have onclick to take the user to the next page. What I really need to do is there a way of making a popup text, like the ones on this site's topic view. I have looked at the source code, and tried copying one <tr> row into a test html file, but no popup. Basically, my question is this: How can I make the table have a popup, for each <tr>, that shows non-dynamic text. Thanks in advance, Prism128 hi folks, i guess i have a fairly simple question for you guys & gals - but i am just not getting to the solution. i have this code: Code: <p><a class="text_menu_gray" href="products.html" onmouseover="this.className='text_menu_brown';return true;" onmouseout="this.className='text_menu_gray'">products </a></p> ... which makes the grey-colored word 'products' appear brown when the mouse is over it. thats all good - but how can i make it stay like that, when the word is clicked on? and will it change back to grey, when another word is clicked on? any advice would be greatly appreciated Hello, The hover link looks good on IE7 and FF but not on IE6 Code:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#header_navigation {
background-color:#0000FF;
position:absolute;
float:left;
font-size:11px;
color:#FFFFFF;
font-weight:bold;
left:190px;
top:130px;
width:145px
}
#header_navigation ul {
border:1px solid #FF0000;
float:left;
list-style-type:none;
margin:0 30px 0 0;
}
#header_navigation li {
width:145px
}
#header_navigation li:hover {
background-color:#FFFFFF;
}
#header_navigation a {
text-decoration:none;
color:#ffffff;
background-color:none;
}
#header_navigation a:hover {
color:#000000;
background-color:#FFFFFF;
width:145px
}
</style>
</head>
<body>
<div id="header_navigation"><!--begin of header_navigation-->
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
<li><a href="blog.asp">Blogs</a></li>
<li><a href="shoutbox.asp">Shoutbox</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>
Not sure what this is referred to. I checked my dhtml book but its from 2000! I want to apply link, visited, hover, active to below code: Code: #print_category {
position: absolute;
left: 35%;
top: 30%;
font-size: 13px;
text-align: left;
line-height: 2 ;
margin-right: 5em;
}
Properties I want to apply: A:link {color: #000099; text-decoration: underline; } A:visited {color: #000099; text-decoration: none; } A:hover {color: #000099; text-decoration: none; } A:active {color: #000099; text-decoration: none; } How can this be done, Ive tried but to no avail: - A#print_category:active {color: #000099; text-decoration: none; } Thanks! I need to put tables in my website that I am designing but thought about using css instead. The tables I wanted were similar in design to these ones :http://www.visionman.com in the middle of the page (about 300px down) but I wanted them to change color when the mouse pointer goes over them also. I would appreciate someone showing me how to do this please. Hello I would like to make a hover effect when my mouse is over a link, as shown in my attachment. What I want is, as shown in the attachment (at design time), when I hover on any link, two horizontal lines are added at the top and bottom of that specific link, and a slight black transparency appears as well as a highlighter (not the text of the link, and by default the background will be slightly grayed). Anyone can help me with this? Edit: even if the black transparency does not appear is not a problem, but how to implement the two lines? Am using only css and html here, no javascript or any other libraries. Is it possible to have a link where the user rolls their mouse over it, and an image appears on top of it? I tried setting it as a background image, but it only fills the background of the text. Thanks! I have the following code, but the CSS file that I have already defines link and hover to be something else Is there a way I can edit the div#hdr_cnt to have it's own definition of the hover and link? Thanks for the help Code: div#hdr_ctr { width:100%; min-width:670px; background-color:#FFF; overflow:hidden; margin:0; padding:0; text-align:center; color:#000000}
div#hdr_cnt { background: url('http://www.hobbyspeed.com/header/hobbyspeed.jpg') no-repeat center; width:670px; height:73px; margin:0 auto; padding:0;}
div#hdr_cnt ul.l { float:left; margin:15px 0 0 18px; padding:0; list-style-type:none; direction:rtl; text-align:right; color:#000000}
* html div#hdr_cnt ul.l { margin-left: 9px; color:#000000 }
div#hdr_cnt ul.r { float:right; margin:15px 0 0 20px; padding:0; list-style-type:none; direction:ltr; text-align:left;}
I wish to have links for the menu like this: http://www.tristarwebdesign.co.uk/templates/templates/karma/index.html However, I wish to have MY OWN font style on each links as it can be seen on: The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on: http://members.lycos.co.uk/darsh25/Personal%20Website/contact.php i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact. Code: <li><a title="link six" href="index.html">link six</a></li> <li><a title="link five" href="index.html">link five</a></li> <li><a title="link four" href="index.html">link four</a></li> <li><a title="link three" href="index.html">link three</a></li> <li><a title="link two" href="index.html">link two</a></li> <li><a title="link one" href="index.html">link one</a></li> My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using CSS, could I ??? I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website. My CSS code so far is: Code: /* CSS Document */
body
{
background-color:black;
background-attachment:fixed;
}
/* .................................... HEADER & FOOTER ................................... */
#header
{
font-family:Georgia, "Times New Roman", Times, serif;
color:white;
text-align:center;
width:100%;
}
#header a
{
color:yellow;
text-decoration:none;
}
#header a:hover
{
text-decoration:underline;
}
#footer
{
font-family:Georgia, "Times New Roman", Times, serif;
color:white;
text-align:center;
border-top:3px solid fuchsia;
float:left;
background-color:black;
width:100%;
}
#footer a
{
color:yellow;
text-decoration:none;
}
#footer a:hover
{
text-decoration:underline;
}
/* ........................................ BANNER ........................................ */
#banner
{
width:100%;
border:none;
text-align:center;
background-color:none;
}
/* ......................................... TOP MENU .................................... */
#topMenu
{
width:100%;
float:right;
border:none;
}
#topMenu ul
{
float:left;
margin-left:4%;
}
#topMenu ul li
{
display:inline;
width:20%;
}
/* ................................... CONTENT ................................................ */
#leftContent
{
float:left;
width:10%;
border:1px solid red;
background-color:green;
}
#centerContent
{
background-color:white;
width:75%;
margin-left:1%;
float:left;
border:1px solid green;
}
#centerContent ul
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
list-style-type:decimal;
color:black;
}
#centerContent li
{
margin:3% 3%;
line-height:1.5em;
}
#rightContent
{
float:right;
background-color:fuchsia;
border:1px solid red;
width:10%;
}
/* ................................... STYLES ......................................... */
p.first-letter:first-letter
{
color:red;
margin-left:5%;
font-size:xx-large;
}
p
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:medium;
line-height:1.5em;
margin:2% 3%;
color:black;
}
h4
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
font-size:x-large;
color:green;
}
h5
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:medium;
margin:2% 3%;
color:blue;
}
h6
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
margin:0;
font-size:medium;
font-weight:normal;
color:red;
}
.italic
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:black;
font-style:italic;
}
.bold
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:black;
font-weight:bold;
}
.colorTextRed
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:red;
}
.colorTextBlue
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:blue;
}
.colorTextGreen
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:green;
}
/* ................................... TABLE ......................................... */
#contactTable
{
background-color:white;
border-spacing:2%;
margin:3% 3%;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
}
#contactTable tr
{
border:none;
}
#contactTable th
{
color:fuchsia;
}
#contactTable td
{
font-size:medium;
color:black;
}
/* ................................... CLASSES ......................................... */
.table
{
background-color:white;
border-spacing:2%;
margin:3% 3%;
font-family:Georgia, "Times New Roman", Times, serif;
border-collapse:collapse;
text-align:left;
}
.tr
{
border:none;
}
.td
{
border:thin solid red;
font-size:medium;
padding:2px;
text-align:center;
color:black;
}
My layout contains a vertical navigation bar. It is split up into individual images. I have created a table to organize the sliced images. I am using CSS to create a hover effect. When you mouseover the table cell, the backgroudn changes (and changes back when the mouse is removed.) This is all peachy, but is it possible for me to change the colors of the text within that table cell along with the background. Heres the CSS: Code:
.link_hover1{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:visited{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:hover{
background-image: url("images/link_img_01b.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:active{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
I tired implementing the font-color property. No use. does this have something to do with my 'td' selector? I have a feeling that this is the problem. Thanks for taking the time to read my question. I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why? Here is my css. @charset "iso-8859-1"; .text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff } .textCopy { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; hover: #ffffff } .textbigger { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; hover: #ffffff } a:hover { color: #ffffff; } a:link { color: #999999; } a:visited { color: #747474; } a:active { color: #CCCCCC; } body { margin-top: 0; background-color: #000000; } You can see this at work at www.pierced.ca Brad I am attempting to create a link on a page that will only appear when it is hovered upon. This is to direct an administrator to an admin page. Here is what I have attempted so far to no avail: Code: div.headleft {
text-align: right;
width: 100%;
}
div.headleft a:link {
display: none;
}
div.headleft a:visited {
display: none;
}
div.headleft a:hover {
display: block;
background: inherit;
color: #ff0000;
}
div.headleft a:active {
display: none;
}
I have tried a few variations to the above snippet of code and am at my wits end... My gratitude ahead of time... I'm trying to have a hover effect on a link within a <td> tag. In firefox it works fine, but in IE it's not working. I wasn't sure if there's a special property in CSS to get it working. My CSS code is: Quote: .leftblock a{display: block; border-top: 1px solid #ffffff; font-weight: bold; color: #21536A; text-decoration:none; background-color:#CCCCFF; } Quote: .leftblock a:hover{border-top: 1px solid #cccccc; background-color: #DDEEFF; font-weight: bold; text-decoration: none; } I added display:block to the a:hover class as well to try that to no avail. http://www.sassyproducts.com/hover.php is where you can see what I'm working on. If you hover over anywhere on the first link, Fundraising, it adds the hover effect, but the other ones will only show the hover effect if you hover over the text. This is in IE. In FF, it works properly. Any ideas what I may need to add or change?... Thanks. I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this? Whew, it's been a while sin'ce i've been here. Thanks in advance! ~Brendan |
|||||||