Style switcher and replacing images

Forum Moderators: not2easy

Message Too Old, No Replies

Style switcher and replacing images

matthew911

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

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.

<!DOCTYPE HTML>

Head


<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">
</script>

Body


<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>
</select>
</form>

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.

penders

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

background-image's?

matthew911

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

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.

rocknbil

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

You can still do this. :-) change

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

to

<p>something useful</p>

Then

#header #logo-or-something {
display: block;
width:24px;
height:32px;
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); }

(etc.)

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.

matthew911

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

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.

Header

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

#menu {
margin-top:90px;
float:right;
}

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.

matthew911

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

Anyone able to help out a noob?

rocknbil

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

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.

matthew911

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

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