hiding/showing with div or changing pictures

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?

Do this with JS.

Say you have the following:

Code:

---

<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:

Code:

---

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

---

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

Code:

---

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

---

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

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:

Code:

---

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

---

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

Code:

---

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.

hey dude thanks a lot for the tip...

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

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.

hey thanks for all the info

i have both ie 7 and mozilla...