Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Style switcher and replacing images



1:04 am on Feb 28, 2012 (gmt 0)

10+ Year Member

Wasn't sure if this thread is more about CSS or Javascript. I'm starting a new site and intend to use a style switcher. My only problem is that I need certain images to change along with the styles. Not sure if anyone needs code for this but here it is.



<link href="/css/default.css" rel="stylesheet" type="text/css" title="default" />
<link href="/css/test.css" rel="alternate stylesheet" type="text/css" title="test" />
<script src="/scripts/styleswitch.js" type="text/javascript">


<form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="default" selected="selected">Default</option>
<option value="test">Test</option>

I have a few images located in my header that need to be switched with every style, but I have no idea how to achieve this. Hopefully someone can help.


9:32 am on Feb 28, 2012 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



1:23 pm on Feb 28, 2012 (gmt 0)

10+ Year Member

Unfortunately, no. I have a background image in my header, which is easy enough to change with different styles, but the other images I want to change are placed over it. One of them is just decorative, and the others are menu buttons that are linked to other pages.


4:31 pm on Feb 28, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

You can still do this. :-) change

<p id="logo-or-something"><img src="/images/myimage.jpg" width="24" height="32" alt="something" useful"></p>


<p>something useful</p>


#header #logo-or-something {
display: block;
background:url(/images/myimage.jpg) top left no-repeat;
text-indent: -50000px;

The text-indent hides the text from browsers. If you already have the p in use and styled, use a span or <a> inside the p for the BG image - if you use an anchor, you'll have to add border:none and outline:none to hide your text-indent.

Menu buttons should be background images anyway, using the above approach. Otherwise you're stuck with Javascript for mouseover effects. what you do is create an image twice as tall as the actual button, with the "normal state" on top, and the mouseover state on the bottom. So if your button is 100 X 50, the image is 100 X 100:

#header li a { display: block; width: 100px; height: 50px; background-position: top left; background-repeat: no-repeat; text-indent: -50000px; border:none; outline: none; }
/* just don't try to text-align: in combination with text-indent. :-) */
#header li a:hover { background-position:bottom left; }
#header #about-link { background-image:url(/images/about.gif); }
#header #home-link { background-image:url(/images/home.gif); }


The good news is this may seem like a ton of work but it's a pretty easy switchover once you commit to it. More advanced: CSS sprites, in which all navigation images are a single image that changes background-position appropriately.


4:57 pm on Feb 28, 2012 (gmt 0)

10+ Year Member

Ah ha. Hopefully I can get this to work, lol. Thank you. I'm glad you included the mouseover effect since I think I neglected to mention I'm using Javascript for that as well.

Oh, one other thing since I'm forgetting to mention important details. The decorative image is located in the header, but it spills down into the content area. The content area is unaffected and I can place things underneath the image if I wish. Will the new code keep it that way?

Edit: After a few attempts, I'm definitely missing something. You might have to talk to me like you'd talk to someone who's never used CSS (or any coding of any kind). More info...Menu buttons are located on the right side of the header, with a margin-top of 90px. Height for all menu buttons is 30px.

div#header {
background:#dddddd url("/images/headerbg1.gif") no-repeat;
border-bottom:6px double #000000;
border-right:0px double #000000;
border-left:0px double #000000;

#menu {

Home page code
<a href="/index.html"><img id="menu" src="/menu/home.gif" data-over="/menu/home_rollover.gif" data-out="/menu/home.gif" alt="home" border="0"></a>

If you are able to just modify my existing code to what it needs to become, I would greatly appreciate it.


2:55 am on Mar 1, 2012 (gmt 0)

10+ Year Member

Anyone able to help out a noob?


5:22 pm on Mar 1, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Not sure what you mean "spills down." As in overlaps? Are you using absolute positioning, negative margining, what?
In either case, a block element is a block element. All you're doing is taking the image out of the element content and putting it as a background image in the element itself. Right?

Reduce your code to the **least common denominator** that displays the problem, post the relevant code and CSS, someone here will help.


3:07 am on Mar 2, 2012 (gmt 0)

10+ Year Member

Nevermind, I've got it working. Thank you for your help.

Featured Threads

Hot Threads This Week

Hot Threads This Month