Resolved onclick change thumbnail and larger image...AAANNNDDD... [Archive]

justame

11-19-2010, 01:22 PM

*peeks into the ol' coding forum n' sooo glad its still just a here®!!!

k...heres the scenerio...

there are four 'thumbs' in row 1...thumb1 thumb2 thumb3 and thumb4

there is one just a large® image in row 2 that changes when the respective thumb is clicked from row 1...AND @ the same time??? the thumb that was clicked just a changes® too...

so now when the viewer just a clicks® thumb2....the big picture should change to BIG 2...the thumb1 should go back to its 'off' state n' thumb2 should be in its 'on' state...

/me found just a script® that does it for two thumbs...aka they change back when one or the other is click...BUTTT.../me cant just a copy® the script changing values to make it work when thumbs 3 and 4 are added into the mix...:O(((

heres what /me has so far...

<a href="javascript:changeImage('front1.jpg')"><img src="news.jpg" id="1" onclick="set(this.id)" width="30" height="30" border="0"></a>
<a href="javascript:changeImage('front2.jpg')"><img src="gallery.jpg" id="2" onclick="set(this.id)" width="30" height="30" border="0"></a>
<a href="javascript:changeImage('front3.jpg')">3</a>
<a href="javascript:changeImage('front4.jpg')">4</a>

and for the 'large' image its...

<img name="mainimage" src="front1.jpg" width="700" height="304" border="0" alt="">'

the above uses coding as just a follows®...

<script type="text/javascript">
function set(val)
{
var path=document.getElementById(val).src;
var start=path.lastIndexOf("/")+1;
var end=path.lastIndexOf(".");
var source = path.substring(start,end);
//alert(type);
if(val==1)
{
document.getElementById("2").setAttribute("src","gallery.jpg");
if(source=="news")
document.getElementById(val).setAttribute("src","news1.jpg");
else if(source=="news1")
document.getElementById(val).setAttribute("src","news.jpg");
}
if(val==2)
{
document.getElementById("1").setAttribute("src","news.jpg");
if(source=="gallery")
document.getElementById(val).setAttribute("src","gallery1.jpg");
else if(source=="gallery1")
document.getElementById(val).setAttribute("src","gallery.jpg");
}

}
</script>

n' too have this script in play being used to 'change' the big image...

<script language="JavaScript" type="text/javascript">

function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>

sooooooo...
what /me is trying to do is get the numbers three and four into the 'when clicked be the large coloured square'... AND if one of the other 4 are clicked the one you were just one goes back to just a small®...:O)

<a href="javascript:changeImage('front1.jpg')"><img src="news.jpg" id="1" onclick="set(this.id)" width="30" height="30" border="0"></a>
<a href="javascript:changeImage('front2.jpg')"><img src="gallery.jpg" id="2" onclick="set(this.id)" width="30" height="30" border="0"></a>
<a href="javascript:changeImage('front3.jpg')"><img src="promotion.jpg" id="3" onclick="set(this.id)" width="30" height="30" border="0"></a>
<a href="javascript:changeImage('front4.jpg')"><img src="community.jpg" id="4" onclick="set(this.id)" width="30" height="30" border="0"></a>

*just a whispers®...
/me has seen scripts/css that just put just a border® 'round the thumbnail which is just a 'downsized copy'®of the large one.....where as THE SCRIPT just a bove®...one uses two graphics for EACH of the four links...news and news1... gallery and gallery1...n' /me would like to have large/small boxes vs a shrunk big one...:O(

just a huuugggsss® to all that just a remember® /me n' just a BIGGER® hugs to those who can just a help® :O)))

vwphillips

11-19-2010, 02:02 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
function set(obj,src){
if (set.lst&&set.lst[0]!=obj){
set.lst[0].src=set.lst[1];
}
set.lst=[obj,obj.src];
var path=obj.src.substring(0,obj.src.lastIndexOf("/")+1);
obj.src=path+src;
}
</script></head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" onclick="set(this,'Eight.gif')" width="30" height="30" border="0">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" onclick="set(this,'Eight.gif')" width="30" height="30" border="0">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" onclick="set(this,'Eight.gif')" width="30" height="30" border="0">

</body>

</html>