CSS Question

summoner49

I want it so that all of my links make a certian image on my page change.... anyone know how to do this?

If that can be done, I also want the links to make a certain background change...

Anyone know if this can/how be done?

Python

it can be done and would most probably use javascript. not exactly sure how though

Forge

Youd have to use a javascript function, I have a rough idea of how to do it so here we go...

<script>

function cangeBG(){
  document.background == "images/background.gif";
}

</script>

Im pretty sure thats how you would do it....

summoner49

That is how you would make hovering over a link change a picture/background? Since I don't know scripting, what parts would be changed to make certain ones change certain ones....

kink

i think you can also use a image flip

kink

yes can be done javascript can do it

kink

div#your area
a: hover, a: current,{
background-color: #00f060;}


no gaurantees on that one though

Python

kink - next time edit your post if you have something else to add....dont make 3 posts in a row. thanks

martian2k4

u ca do this is dreamweaver easy if ur using layers

TheDonkey

You can do a image swap with CSS its rather simple to do, however you must also use CSS to preload all the images used for the menu (this way it doesnt flicker)...the benefits to useing a CSS image swap menu to that of it not involving JAVA and some users my have Java OFF....

ok so enough about that now to how to make a CSS image swap menu...

this is just example code pieces moddify them as needed.....am assuming the reader of this will have some scripting experince....

Place this HTML where you would like the menu to appear

[HTML] <div id="M1">
<a class="M1" href="#"> </a>
</div>
[/HTML]

Where the above "#" appears type "your.html" file.....and repeat the above as necessary for the number of menu items, make sure to change the M1 each time... (note the   is used if you are going to have the text saved in the image file as in the particular font you want, when doing this you should make sure you also have a text type "link navigation menu" at the bottom of your page. This is always good practice anyways )

This is the CSS you want to use making the necessary changes

#M1 .M1:link, .M1:visited 
			{
			text-decoration: none;
			background-image: url('images/YOURM1_LINK.gif');
			text-decoration: none;
			width: 171px; /* use your own image size; */
			height: 41px; /* use your own image size; */
			background-repeat: no-repeat;
			background-position: left top;
			display: block;
			}
			
			#M1 .M1:hover
			{
			background-image: url('images/YOURM1_HOVER.gif');
			text-decoration: none;
			width: 171px; /* use your own image size; */
			height: 41px; /* use your own image size; */
			background-repeat: no-repeat;
			background-position: left top;
			display: block;
			}
			
			#M1 .M1:active
			{
			background-image: url('images/YOURM1_ACTIVE.gif');
			text-decoration: none;
			width: 171px; /* use your own image size; */
			height: 41px; /* use your own image size; */
			background-repeat: no-repeat;
			background-position: left top;
			display: block;
			}

Place that in your CSS....again repeating as necessary just change the M1 to M2, and make sure that the next menu item in the HTML is changed as well...

Next make 3 graphics one each for your LINK, HOVER, and ACTIVE, now if you have more than one menu item you will need to make three buttons (link,hover,active) for each menu item....But this is what makes it simple to moddify the menu all you have to do is replace those image files and you have updated your entire sites menu....I have begun to experiment with using animated gifs and CSS....it has worked with some success....if you want, you can see an example of the above code in action, just click on my sig....(note you will notice that the animated gifs are drastically slower in IE then Firefox they are at the correct frame rate (or fps) in firefox but not in IE, im still working on fixing that)

Almost forgot you are going to want to use the following CSS/HTML to preload your images...place this as the very last thing right above the </body> tag

[HTML]<div style="display:none">
Your browser does not support CSS.

If images appear below, please disregard them.
<hr />
<img src="images/YOURM1_HOVER.gif" alt="" width="171" height="41" />

<img src="images/buttons/YOURM1_ACTIVE.gif" alt="" width="171" height="41" />


</div>[/HTML]

Again repeating as necessary, and remember to use your images "height" and "width" sizes.....

Hope you enjoy, happy interneting........

kink

heres one
<a href="http://www.your site.com" onMouseover="document.images.logo.src='yourpic'" onMouseout="document.images.logo.src='yourotherpic'">
<img name="logo" src="originalpic" /></a>
i think it works