Swapping alt tags along with images

[squiggly web]

I'm new to javascript so bear with me if I'm missing something obvious.

I'm swapping images using the script given below. Why doesn't the alt tag also swap?

There is also a hover image coded in html/css.

[<div id="product_photo">
<a class ="medium" href="#" title="L Chain with Toggle."><img id="silver_chain_medium_image" src="images/CH_L_med.jpg" width="250" height="330" alt="L Chain with Toggle."/><img class="large" id="silver_chain_large_image" src="images/CH_L.jpg" width="375" height="500" alt="L Chain with Toggle." /></a>
</div>]

[var silver_chain_paragraph = document.getElementById("silver_chain_paragraph");
var silver_chain_heading = document.getElementById("silver_chain_heading");
var silver_chain_medium_image = document.getElementById("silver_chain_medium_image");
var silver_chain_large_image = document.getElementById("silver_chain_large_image");
var h_chain = document.getElementById("h_chain");
var r_chain = document.getElementById("r_chain");
var l_chain = document.getElementById("l_chain");

l_chain.onclick=function(){
silver_chain_paragraph.innerHTML=("L Chain with Toggle.");
silver_chain_medium_image.setAttribute("src", "images/CH_L_med.jpg");
silver_chain_large_image.setAttribute("src", "images/CH_L.jpg");
silver_chain_heading.innerHTML=("L Chain");
}

h_chain.onclick=function(){
silver_chain_paragraph.innerHTML=("H Chain with Toggle.");
silver_chain_medium_image.setAttribute("src", "images/CH_H_med.jpg");
silver_chain_large_image.setAttribute("src", "images/CH_H.jpg");
silver_chain_heading.innerHTML=("H Chain");
}

r_chain.onclick=function(){
silver_chain_paragraph.innerHTML=("R Chain with Clasp.");
silver_chain_medium_image.setAttribute("src", "images/CH_R_med.jpg");
silver_chain_large_image.setAttribute("src", "images/CH_R.jpg");
silver_chain_heading.innerHTML=("R Chain");
}
]

[/*Start of Product Photo Hover States*/
#product_photo a.medium, #picture a.small:visited {
display:block;
width:250px;
height:330px;
text-decoration:none;
background:#ffffff;
top:0;
left:0;
border:10px;
}

#product_photo a img {
border:0;
}

#product_photo a.medium:hover {
text-decoration:none;
background-color:#000000;
color:#000000;
}

#product_photo a .large {
display:none;
}

#product_photo a.medium:hover .large {
display:block;
position:absolute;
top: 90px;
left:90px;
}
]

[Fotiman]

Welcome to WebmasterWorld!

All of your onclick function set the src attribute, for example:

silver_chain_medium_image.setAttribute("src", "images/CH_L_med.jpg");

Every place where you see a line similar to that, add another line like this:

silver_chain_medium_image.setAttribute("alt", "YOUR ALT MESSAGE HERE");

[squiggly web]

Thanks Fotiman. I tried what you suggested but I still can't get it to work.

image.setAttribute("src", "images/med.jpg");
image.setAttribute("alt", "Medium Image");

Did I miss something?

[squiggly web]

Okay, I found the problem. The alt tag IS swapping but the text I need to swap out is in the title tag on the anchor.

I tried adding a class "swaptitle" to the anchor tag but it didn't work. When I hover over CH2.jpg I still get "Pendant on Chain 1" text appearing but I want it to read "Pendant on Chain 2".

Any ideas?

<div id="product_photo">
<a id="swaptitle" class="medium" href="#" title="Pendant on Chain 1."><img id="medium_image" src="images/CH1_med.jpg" width="250" height="330" alt="Pendant on Chain 1."/><img class="large" id="large_image" src="images/CH1.jpg" width="375" height="500" alt="Pendant on Chain 1." /></a>
</div>

var CH1 = document.getElementById("CH1");
var CH2 = document.getElementById("CH2");

CH1.onclick=function(){
heading.innerHTML=("Pendant on Chain 1");
medium_image.setAttribute("src", "images/CH1_med.jpg");
medium_image.setAttribute("alt", "Pendant on Chain 1.");
swaptitle.setAttribute("title", "Pendant on Chain 1.");
large_image.setAttribute("src", "images/CH1.jpg");
large_image.setAttribute("alt", "Pendant on Chain 1");
}

CH2.onclick=function(){
heading.innerHTML=("Pendant on Chain 2");
medium_image.setAttribute("src", "images/CH2_med.jpg");
medium_image.setAttribute("alt", "Pendant on Chain 2.");
swaptitle.setAttribute("title", "Pendant on Chain 2.");
large_image.setAttribute("src", "images/CH2.jpg");
large_image.setAttribute("alt", "Pendant on Chain 2");
}

[daveVk]

try
document.getElementById("swaptitle").setAttribute("title", "Pendant on Chain 1.");
or
document.getElementById("swaptitle").title = "Pendant on Chain 1.";

[squiggly web]

Thanks daveVk. Your note helped me see the problem. I hadn't defined a variable for "swaptitle".

The missing line was
var swaptitle = document.getElementById("swaptitle");

Then this works when placed inside the function
swaptitle.setAttribute("title", "Pendant on Chain 2.");

Thanks again.