Monday, September 19, 2011

How to have image change when link is cilcked?

First to see my problem, go to http://theamaturetraveler.com . In the top right corner you will see an option for switching the color scheme of the layout (red, and green). My problem is with the RSS button image.



It goes good with the theme while it's set to red, however, if the theme is set to green, not so much. I have a button like it in green, but my problem is figuring out how to code it so when the theme is changed, it changes. That way when the red theme is selected, it shows the red RSS button, and the green RSS button when the green theme is selected.



Can anyone explain this?How to have image change when link is cilcked?You need to write a little bit of javascript.



Paste this into a new file, save it as html and open in a browser... It will give you a rough idea:



%26lt;script%26gt;



var theme = 1;

function swapImg() {

if (theme == 1)

mypic.src='http://is.gd/2lqu7';

else

mypic.src='http://is.gd/2lqxU';



theme = -theme;

}



%26lt;/script%26gt;



%26lt;img name=%26quot;mypic%26quot; id=%26quot;mypic%26quot; src=%26quot;http://is.gd/2lqxU%26quot;%26gt;



%26lt;a href=%26quot;#%26quot; onClick=%26quot;swapImg()%26quot;%26gt;click to switch!%26lt;/a%26gt;How to have image change when link is cilcked?%26lt;html%26gt;

%26lt;head%26gt;

%26lt;title%26gt;Image changer%26lt;/title%26gt;

%26lt;script type = %26quot;text/javascript%26quot;%26gt;

function showProperRssImage(imageColour){

document.getElementById(%26quot;rssImage%26quot;).sr… = imageColour + %26quot;.jpg%26quot;;

}

%26lt;/script%26gt;

%26lt;/head%26gt;

%26lt;body%26gt;

%26lt;img id = %26quot;rssImage%26quot; src=%26quot;red.jpg%26quot; /%26gt;

%26lt;a href=%26quot;javascript:showProperRssImage('red… Theme%26lt;/a%26gt;?%26lt;a href=%26quot;javascript:showProperRssImage('gre… Theme%26lt;/a%26gt;

%26lt;/body%26gt;

%26lt;/html%26gt;



In this example, you have to call the function %26quot;showProperRssImage%26quot; along with the colour changing function and also the image URL should be proper URL.



Hope this helps.How to have image change when link is cilcked?One way to do this would be to use the innerHtml attribute of the object containing the RSS logo to load a different image. Another way would be to make that RSS logo transparent (that is take the Red out of it and just do the shading and the white parts on a gif) so that when the background colour of the page changes so will the colour of the image. My choice would be the second