hiding/showing with div or changing pictures

[beenchillen]

its been a while since ive messed with html/css/
and i know ive seen this done before but ive forgotten how

basically what im trying to do is have a picture on a website kinda like the background and have it changed by clicking on links without refreshing the page


or
to show/hide a certain section of the page? using div?


can it be done without javascript?

[aversion]

Do this with JS.

Say you have the following:


<div id="mydiv">
blah blah blah on top of the background
</div>

Where you have a background image on the div defined by CSS.

For example:

#mydiv {
background-image: url(thisimage.jpg);
}


to change the background image of that div you can use the following js script:

document.getElementById("mydiv").style.backgroundImage = "url(anotherimage.jpg)"



To hide/show a DIV you can use the following code:


function showHide(ref){
if (document.getElementById(ref).style.display == ""){
show = "none";
}
else {
show = "";
}
document.getElementById(ref).style.display = show;

}

Where 'ref' is the ID of the element passed in the function call. For example:



<a href="#" onclick="showHide('mydiv')">Show/Hide</a>


Many javascript libraries, like prototype.js (http://prototype.conio.net/) , have a built in 'toggle' function that automatically does the above with a simple piece of code like:


function showHide(ref){
Element.toggle("ref");
}

Which is a lot less code but you have to load the whole JS library in as well so... it's only useful if you're using a lot of JS.

[beenchillen]

hey dude thanks a lot for the tip...

one question though...is it possible to do this with css/html alone without javascript?

[aversion]

No, I don't think there's any way to change any CSS properties without using JS.

The only CSS 'behaviours' are the pseudo-classes :link :active and :hover. There are a few others, like :first-line, but none of them would help you with this.

Most modern browsers, except IE of course, allow you to use the :hover pseudo-class on any HTML element but in IE it's on an anchor only.

[beenchillen]

hey thanks for all the info

i have both ie 7 and mozilla...