I have the following code which changes the big image according to the thumbnail clicked (this part is working).
I want to change accordingly the url in the href (so that each big image shown has a link to another URL). <-- this last part is not working.
----------HERE IS THE CODE ----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
".dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>image swapping </title>
<script type="text/javascript">
function init(){
th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
swapFile(this.href);
}
}
}
function swapImage(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('bigpic').src=url;
}
function swapFile(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('file').href=url;
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<div>
<a href="01.html" id="file"><img id="bigpic" src="images/01.jpg" alt=""></a>
</div>
<div id="thumbs">
<img src="images/01t.jpg" alt="01t.jpg">
<img src="images/02t.jpg" alt="02t.jpg">
<img src="images/03t.jpg" alt="03t.gif">
<img src="images/04t.jpg" alt="04t.png">
<img src="images/05t.jpg" alt="05t.png">
<img src="images/06t.jpg" alt="06t.png">
</div>
</body>
</html>
I have the following code which changes the big image according to the thumbnail clicked (this part is working).
I want to change accordingly the url in the href (so that each big image shown has a link to another URL). <-- this last part is not working.
----------HERE IS THE CODE ----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>image swapping </title>
<script type="text/javascript">
function init(){
th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
swapFile(this.href);
}
}
}
function swapImage(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('bigpic').src=url;
}
function swapFile(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('file').href=url;
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<div>
<a href="01.html" id="file"><img id="bigpic" src="images/01.jpg" alt=""></a>
</div>
<div id="thumbs">
<img src="images/01t.jpg" alt="01t.jpg">
<img src="images/02t.jpg" alt="02t.jpg">
<img src="images/03t.jpg" alt="03t.gif">
<img src="images/04t.jpg" alt="04t.png">
<img src="images/05t.jpg" alt="05t.png">
<img src="images/06t.jpg" alt="06t.png">
</div>
</body>
</html>
- can you make a JSFiddle ? – Francisco Corrales Morales Commented Jan 19, 2014 at 22:07
4 Answers
Reset to default 2This question might get flagged as a duplicate, but here's the answer anyway.
To change the href value of an anchor:
document.getElementById('file').setAttribute('href',url);
You need to change logic slightly...Thumbnails doesn't have links, right?
<script>
function init(){
th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
swapFile(this.getAttribute("alt"));
}
}
}
function swapImage(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('bigpic').src=url;
}
function swapFile(hurl){
str=hurl.lastIndexOf(".");
str1=hurl.substring(str-1);
str2=hurl.substring(str);
hurl=hurl.replace(str1,str2);
hurl=hurl.replace('.jpg','.html'); // for html extension at the end of the link
document.getElementById('file').href=hurl;
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
Html:
<div>
<a href="01.html" id="file"><img id="bigpic" src="images/01.jpg" alt=""></a>
</div>
<div id="thumbs">
<img src="images/01t.jpg" alt="01t.jpg">
<img src="images/02t.jpg" alt="02t.jpg">
</div>
I ran the code in Firebug, and found the error:
th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
swapFile(this.href);
}
}
}
"this" refers to th[c], and now look at your image tags:
<img src="images/01t.jpg" alt="01t.jpg">
<img src="images/02t.jpg" alt="02t.jpg">
<img src="images/03t.jpg" alt="03t.gif">
They don't have href attribute, so your swapFile function fails and terminates script execution. You could add custom attributes to these images:
<img href="link1" src="images/01t.jpg" alt="01t.jpg">
<img href="link2" src="images/02t.jpg" alt="02t.jpg">
<img href="link3" src="images/03t.jpg" alt="03t.gif">
But images are not anchors, so th[c].href will not give you the value.
Here's the new init function:
function init(){
th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
swapFile(this.attributes.href.value); // <-- fixed this line
}
}
}
I have tested the code locally and it runs.
<html>
<head>
<script>
function red(){
var a = document.getElementById("your_tag_name");
a.href = 'www.thelinkyouwanttoadd.';
}
</script
</head>
<body>
<a id="your_tag_name" href="www.google." onclick="red()">
</body>
</html>