Stylesheet switcher - image menu for selection

[jigarshah]

1) Script Title:
Stylesheet switcher

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

3) Describe problem:
i have created new thread ....please help me
Instead of using radio button to select stylesheet i want to use menu with images. when i select any color i want to change selected image tansperancy through css.
Actual code is like below



<div id="colormenu">
<ul>
<li><a href="#" type="image" name="color_image" id="blue" onClick="chooseStyle(this.id, 60)"><img src="images/colors_blue.jpg " alt="blue" /></a></li>
<li><a href="#" type="image" name="color_image" id="orange" onClick="chooseStyle(this.id, 60)"><img src="images/colors_orange.jpg" alt="blue" /></a></li>
<li><a href="#" type="image" name="color_image" id="red" onClick="chooseStyle(this.id, 60)"><img src="images/colors_red.jpg" alt="red" /></a></li>


for selected color


<li><a class="current" href="#" type="image" name="color_image" id="red" onClick="chooseStyle(this.id, 60)"><img src="images/colors_red.jpg" alt="red" /></a></li>


css is


#colormenu a.current img {
background:#f0f0f0;
color:#505050;
border-right:1px solid #505050 ;
border-top:1px solid #505050 ;
border-bottom:1px solid #505050 ;
border-left:1px solid #505050 ;
padding:3px 3px 3px 3px;
opacity: 1;
filter: alpha(opacity=100);}

Problem is i tried using java script to changes class of href. something as below.


function setSelectedStyle(styletitle) {
elements = document.getElementsByName("color_image")
var i
for (i=0; i < elements.length; i++)
{
if(elements[i].id==selectedtitle)
{
alert("item is " + elements[i].id)
elements[i].class="current"
}
else
{
alert("item is none")
}
break;
}
}


Its not working. It does not give any error in javascript console(FF). what went wrong with this code?

[jscheuer1]

Just use the default script and instead of radio buttons, use links like those listed in the "Regular links as the interface:" section from the demo page. These look like so:


<a href="javascript:chooseStyle('none', 60)" checked="checked">Default style</a>
<a href="javascript:chooseStyle('blue-theme', 60)">Blue theme</a>
<a href="javascript:chooseStyle('brown-theme', 60)">Brown theme</a>

Only instead of the text (red in the above) use the images of your choice:


<a href="javascript:chooseStyle('none', 60)" checked="checked"><img src="default.gif" border="0"></a>

[ddadmin]

I think basically what you're asking is how to dynamically assign the CSS class "current" to the link currently clicked on. Use this code:


<div id="colormenu">
<ul>
<li><a href="#" type="image" name="color_image" id="blue" onClick="chooseStyle(this.id, 60); highlightlink(this)"><img src="images/colors_blue.jpg " alt="blue" /></a></li>
<li><a href="#" type="image" name="color_image" id="orange" onClick="chooseStyle(this.id, 60); highlightlink(this)"><img src="images/colors_orange.jpg" alt="blue" /></a></li>
<li><a href="#" type="image" name="color_image" id="red" onClick="chooseStyle(this.id, 60); highlightlink(this)"><img src="images/colors_red.jpg" alt="red" /></a></li>
</div>

<script type="text/javascript">

function highlightlink(selectedlink){
var menulinks=document.getElementsByTagName("a")
for (var i=0; i<menulinks.length; i++)
menulinks[i].className="" //deselect all links
selectedlink.className="current" //select clicked link
}

</script>

As you can see, just call "highlightlink(this)" inside the onClick event handler of each link.

[jigarshah]

Thanks for this..but this resets all anchor's class...:)
and i also want to use it when page loads to indicate which color is selected ..
thanks once again

[ddadmin]

Hmmm there's currently no easy way to automatically indicate the link that corresponds to the selected style sheet unfortunately. The script only supports this for radio or selection menu interfaces. It's something I'll have to add to the script down the line.

Regarding resetting all anchor classes, isn't that what you'd need? By that I mean, in order to assign a class of "current" to the clicked on link, you'd also have to first remove this class from any previously clicked on link. One way is just to remove this class from all links before giving the clicked on link the class again.