You’ll need to set some more information in your onclick handlers. I’ll address just the green one for now (changing the red should follow pretty easily). Here’s what you have:
<a href="#" onclick="setActiveStyleSheet('green'); return false;">Green</a>
The first thing you need to do is give your feed icon an id. Place id="feedicon"
inside your <img src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-128x128.png" align="right"; width="75" height="75">
tag.
Then you need to add another element to the onclick handler as well. Try this:
<a href="#" onclick="function() {
setActiveStyleSheet('green');
document.getElementById("feedicon").src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-green128x128.png";
}
return false;">
Green
</a>
When you click the “Green” link it will swap your active stylesheet and change the src tag on the feed icon. You should be able to swap everything out for the “Red” link based on the same format.
I think I put the code in like you said, but now the image does not show up and the links are what change color. What did I do wrong 0.o. By the way, I have little to no JavaScript experience yet.
See my next post … or send me an email at eric@eamann.com so I can talk you through it.
You have a couple of errors in your code, so try this. Replace the following:
<div class="stylewp">
Theme:
<ul>
<a href="#" onclick="function() {
setActiveStyleSheet('red');
document.getElementById("redfeedicon").src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-128x128.png";
}
return false;">
Red
</a>
<a href="#" onclick="function() {
setActiveStyleSheet('green');
document.getElementById("greenfeedicon").src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-green128x128.png";
}
return false;">
Green
</a>
<li><a href="#" onclick="setActiveStyleSheet('red'); return false;">Red</a></li>
<li><a href="#" onclick="setActiveStyleSheet('green'); return false;">Green</a></li>
</ul>
<br />
</div>
<div class="stylewp">
<a href="http://feeds.feedburner.com/TaTPosts"><img src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-128x128.png" align="right"; width="75" height="75" id="redfeedicon"></a>
<a href="http://feeds.feedburner.com/TaTPosts"><id="greenfeedicon" img src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-green128x128.png" align="right"; width="75" height="75"></a>
</div>
with:
<div class="stylewp">
Theme:
<ul>
<li><a href="#" onclick="setActiveStyleSheet('red'); document.getElementById('feedicon').src='http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-128x128.png'; return false;">Red</a></li>
<li><a href="#" onclick="setActiveStyleSheet('green'); document.getElementById('feedicon').src='http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-green128x128.png'; return false;">Green</a></li>
</ul>
<br />
</div>
<div class="stylewp">
<a href="http://feeds.feedburner.com/TaTPosts"><img src="http://theamaturetraveler.com/wp-content/uploads/2009/08/gmbfeed-icon-128x128.png" align="right" width="75" height="75" id="feedicon"></a>
</div>