okay, so this is my HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css"
href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet.css" />
</head>
<div id="container">
<div id="title">
<center><img src=http://www.webdeveloper.com/forum/archive/index.php/"title.jpg" ALT= " Kathleen O. Ryan Fine Art Photography"></center>
</div>
<div id="pictures">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"farrier2.jpg">
</div>
<div id="links">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"portraitphotography.html"><img border="0" src="portraitphotobutton.jpg" onmouseover="src='rollover1.jpg';" alt="Portait Photography" />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"photoart.html"><img border="0" src="photoartbutton.jpg" ALT= "Photo Art"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"cards.html"><img border="0" src="cardsbutton.jpg" ALT= "Cards"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.html"><img border="0" src="contactbutton.jpg" ALT= "Contact"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"artistsinfo.html"><img border="0" src="artistsinfobutton.jpg" ALT= "Artists Info"></a>
</div>
</div>
<body>
<div id="footer">
<center>Contact: 281-681-9001 (Studio) or 713-992-2673 (Mobile)</center>
</div>
</body>
</html>
And as you can see, in the first image, the rollover is a javascript thing (i think) well it works, but then once the image changes it stays that way and doesn't go back when the mouse leaves it. I would really like to do it in CSS, this is my CSS file, i can't figure out how to do it,
a:link {
}
a:visited {
}
a:hover {
background-image: url (rollover1.jpg);
}
a:active {
}
body {
background-color: #000;
color: #fff;
}
#container {
width: 625px;
height: 450px;
border: 1px solid #fff;
margin: 0 auto;
}
#footer {
margin: 0 auto;
color: #fff
}
#links {
padding-left: 10px;
padding-top: 0px;
margin-left: 9cm;
}
#title {
padding-top: 40px;
}
#pictures {
margin-right 15px;
}
also, in the link hover i tried to change the image but that didn't work!
any help would be great!!
thanks!CSS:#cssRollover {
width:100px;
height:100px;
background:#fff url('normalimage.gif') no-repeat;
}
#cssRollover a {
display:block;
width:100%;
height:100%;
}
#cssRollover a:hover {
background:#000 url('hoverimage.gif') no-repeat;
}
HTML:
<div id="cssRollover"><a href=http://www.webdeveloper.com/forum/archive/index.php/"linkedfile.html"></a></div>
Hope this helps,
-DanThis looks like it will only work for one, so does that mean i gotta do the same thing for all of them?
thanks.Yeah that will only work for one if it is used for navigation it is propbably best to use a list and just change the text for the buttons. If you get what i mean. Try this link for taming lists and where it gives you the selectors for li a:link and li a:hover just basically use what has been given above. List o Matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->)Thanks, but i don't know that i made it that clear. The rollovers are completely different images. Each link is a picture, and the rollovers are different pictures (that have different colors) of each. The list won't work for that, thanks though!List is a way to arrange your links (if there is more than one link then there is a list of links).
Individual graphics are applied to anchor elements (links) by giving each anchor an ID.
See the right side navigation on my site for an example.Oops missed that bit sorry. Yeah just do what vladdy says give them different ids every time for the different image.hey vladdy, those links on the right side of your site, were they done using a list?
thanks.Does your browser have the "View Source" functionality
Again, list has nothing to do with the way links are functioning - it is a logical way to arrange a number of links with the same purpose i.e. navigation.I have a demonstration of the CSS image rollover on my site (<!-- m --><a class="postlink" href="http://216.36.173.149/hiteckdesign/">http://216.36.173.149/hiteckdesign/</a><!-- m -->), in the navigation bar. It is done using two different background images and text for labeling them. After using CSS to define the styles, it took only a small amount of code for each link:
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm" title="About Us" accesskey="a"><span style="text-decoration:underline;">A</span>bout Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm" title="Our Services" accesskey="s"><span style="text-decoration:underline;">S</span>ervices</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"prices.htm" title="Prices" accesskey="p"><span style="text-decoration:underline;">P</span>rices</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"portfolio.htm" title="Portfolio" accesskey="o">P<span style="text-decoration:underline;">o</span>rtfolio</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm" title="Contact Us" accesskey="c"><span style="text-decoration:underline;">C</span>ontact Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"faq.htm" title="Frequently Asked Questions" accesskey="f"><span style="text-decoration:underline;">F</span>AQ</a></li>
</ul>
</div>
I strongly recommend using text rather than image text for labeling.
-Dan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css"
href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet.css" />
</head>
<div id="container">
<div id="title">
<center><img src=http://www.webdeveloper.com/forum/archive/index.php/"title.jpg" ALT= " Kathleen O. Ryan Fine Art Photography"></center>
</div>
<div id="pictures">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"farrier2.jpg">
</div>
<div id="links">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"portraitphotography.html"><img border="0" src="portraitphotobutton.jpg" onmouseover="src='rollover1.jpg';" alt="Portait Photography" />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"photoart.html"><img border="0" src="photoartbutton.jpg" ALT= "Photo Art"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"cards.html"><img border="0" src="cardsbutton.jpg" ALT= "Cards"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.html"><img border="0" src="contactbutton.jpg" ALT= "Contact"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"artistsinfo.html"><img border="0" src="artistsinfobutton.jpg" ALT= "Artists Info"></a>
</div>
</div>
<body>
<div id="footer">
<center>Contact: 281-681-9001 (Studio) or 713-992-2673 (Mobile)</center>
</div>
</body>
</html>
And as you can see, in the first image, the rollover is a javascript thing (i think) well it works, but then once the image changes it stays that way and doesn't go back when the mouse leaves it. I would really like to do it in CSS, this is my CSS file, i can't figure out how to do it,
a:link {
}
a:visited {
}
a:hover {
background-image: url (rollover1.jpg);
}
a:active {
}
body {
background-color: #000;
color: #fff;
}
#container {
width: 625px;
height: 450px;
border: 1px solid #fff;
margin: 0 auto;
}
#footer {
margin: 0 auto;
color: #fff
}
#links {
padding-left: 10px;
padding-top: 0px;
margin-left: 9cm;
}
#title {
padding-top: 40px;
}
#pictures {
margin-right 15px;
}
also, in the link hover i tried to change the image but that didn't work!
any help would be great!!
thanks!CSS:#cssRollover {
width:100px;
height:100px;
background:#fff url('normalimage.gif') no-repeat;
}
#cssRollover a {
display:block;
width:100%;
height:100%;
}
#cssRollover a:hover {
background:#000 url('hoverimage.gif') no-repeat;
}
HTML:
<div id="cssRollover"><a href=http://www.webdeveloper.com/forum/archive/index.php/"linkedfile.html"></a></div>
Hope this helps,
-DanThis looks like it will only work for one, so does that mean i gotta do the same thing for all of them?
thanks.Yeah that will only work for one if it is used for navigation it is propbably best to use a list and just change the text for the buttons. If you get what i mean. Try this link for taming lists and where it gives you the selectors for li a:link and li a:hover just basically use what has been given above. List o Matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->)Thanks, but i don't know that i made it that clear. The rollovers are completely different images. Each link is a picture, and the rollovers are different pictures (that have different colors) of each. The list won't work for that, thanks though!List is a way to arrange your links (if there is more than one link then there is a list of links).
Individual graphics are applied to anchor elements (links) by giving each anchor an ID.
See the right side navigation on my site for an example.Oops missed that bit sorry. Yeah just do what vladdy says give them different ids every time for the different image.hey vladdy, those links on the right side of your site, were they done using a list?
thanks.Does your browser have the "View Source" functionality
Again, list has nothing to do with the way links are functioning - it is a logical way to arrange a number of links with the same purpose i.e. navigation.I have a demonstration of the CSS image rollover on my site (<!-- m --><a class="postlink" href="http://216.36.173.149/hiteckdesign/">http://216.36.173.149/hiteckdesign/</a><!-- m -->), in the navigation bar. It is done using two different background images and text for labeling them. After using CSS to define the styles, it took only a small amount of code for each link:
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm" title="About Us" accesskey="a"><span style="text-decoration:underline;">A</span>bout Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm" title="Our Services" accesskey="s"><span style="text-decoration:underline;">S</span>ervices</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"prices.htm" title="Prices" accesskey="p"><span style="text-decoration:underline;">P</span>rices</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"portfolio.htm" title="Portfolio" accesskey="o">P<span style="text-decoration:underline;">o</span>rtfolio</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm" title="Contact Us" accesskey="c"><span style="text-decoration:underline;">C</span>ontact Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"faq.htm" title="Frequently Asked Questions" accesskey="f"><span style="text-decoration:underline;">F</span>AQ</a></li>
</ul>
</div>
I strongly recommend using text rather than image text for labeling.
-Dan