need some minor html/css help

i have an image that is a link

i want it to change to a different picture when i mouse over

is there an easy way to do this?

 

Yup, some simple javascript should do the trick:

Code (Text):

1.  
2. <a href="url here" onmouseover="document.rollover.src='new_img_url'" onmouseout="document.rollover.src='old_img_url'"><img src="old_img_url" name="rollover"></a>
3.  

Replace "old_img_url" and "new_img_url" with your images.

 

ya i saw that
im not sure if im allowed to use js in my assignment, is there any other way to do it?

 

Oh, well I suppose this could be accomplished using just CSS. Its a longer solution though.
Consult http://www.edginet.org/techie/website/cssimg.html for the code.

 

ill check that out

thanks

 

Yess CSS rollovers involved putting the two pictures on top of each other,
with display: block;
and then when hover, the position changes, many tutorials on google

 

ok so apparently im not allowed to use any css or java...now i have to essentially rewrite my whole page...and im lost

when he says to use "inline styles", what does that mean?

 

inline styles IS css. Shoot your teacher.
EDIT: After thinking about it, don't shoot your teacher. I might get into trouble for spurring you on. :lol:

 

sorry its done...the police are coming after shawn from neofriends.net

id run and hide if i were you

so my code looks somewhat like this

<style type=text/css>

body {
font: 9px verdana;
color: #ffffff;
}

and then theres other things in here, like dimensions for one of my div layers, link colors, and other shit...

</style>

this is all just inline styles?
does type=text/css need to be there?

 

Yeah, inline styles are still CSS... >_>

If you are using "<style>" tags, then its not inline. Inline means that the style is done inside the element that's being styled. So like:

Code (Text):

1.  
2. <img src="asdf" style="[styling goes here]">
3.  

 

ok so this is what im supposed to do?

Code (Text):

1. <div id="Layer1" style="position:absolute; OVERFLOW: auto; WIDTH: 403px; HEIGHT: 305px; z-index:1; left: 250px; top: 400px;">

 

Well that's the idea. I can't tell you if the styling is correct though

 

ya thats just from an old piece of code, i used to do everything like that...but i found the other way much easier and well organized

 

Code (Text):

1. <style>
2.  
3. a:link {
4. font: 12px verdana; color: #000000; text-decoration: none; }
5. a:visited {
6. font: 12px verdana; color: #000000; text-decoration: none; }
7. a:active {
8. font: 12px verdana; color: #000000; text-decoration: none; }
9. a:hover {
10. font: 12px verdana; color: #000000; text-decoration: none; }
11. </style>

i wanna convert that into inline styles

how would i do that?

oops i didnt realize i had the last post...can a mod please merge the 2 posts?

 

Here is a site that can help.
http://www.elated.com/articles/css-rollover-buttons/

I used to do alot of css rollovers when I used to design. If you want me to do the whole thing (I might take some time, commitments) drop me a PM with details