3 replies [Last post]
rageous
Offline
newbie
Last seen: 16 years 37 weeks ago
Joined: 2004-02-10
Posts: 2
Points: 0

Hey folks. Here's what I'm looking to do:

I want to set my web page up so that the text links in one div change the style sheet of a separate div. In more detail, I want a way to display all my artwork, and I want to set it up where I start with text links in div 1, and clicking on each link will load a new style sheet into div 2, which will then display the proper piece of art as the background image of div 2.

Additionally, I'd like to do this using php as well as make it 100% XHTML strict, but I am completely unfamiliar with php. I am trying to avoid javascript here if at all possible. So I'm going to need pretty clear specific instructions to get that part done correctly.

I'm pretty sure searching this site will lead me to some sort of answer, but I've been struggling for 2 weeks to get this done and I'm sort of under the gun now, and need some help with my specific issue, as I've been unable to get generic things I've found online to work for me.

Any and all help would be greatly appreciated. Thanks in advance.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Swapping style sheets using text links

Hi rageous,
Just set up different classes for the div you wish to change then use the link to change the divs className.
Here a very simple function without any error checking :roll:

 function changeclass(theid, newclass){ 
document.getElementById(theid).className=newclass; 
} 
and you just call it with the id of the div to change and the new class name.<a href="#" onclick="changeclass('boxtochange', 'thenewclass')">the new class</a>

Hope that helps

rageous
Offline
newbie
Last seen: 16 years 37 weeks ago
Joined: 2004-02-10
Posts: 2
Points: 0

Swapping style sheets using text links

As I look at what you posted, it seems to me I can only set that function up to put in just one new class, when I need the ability to swap 25 or so in and out. Am I wrong?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Swapping style sheets using text links

Hi rageous,
I was asuming you will have a link for each class, if you just want to use something like a next button try.

function changeclass(theid){ 
var cnames= new Array("classone", "classtwo", "classthree"); 
var cid=document.getElementById(theid);
var oldclass=cid.className; 
for (var i=0; i <cnames.length; i++){ 
   if(cnames[i]==oldclass){ 
      if(i+1 <cnames.length){ 
       cid.className=cnames[i++]; 
       }else{ 
         cid.className=cnames[0]; 
       } 
      }
   }
}