...

View Full Version : onclick image swap



tpeck
07-03-2006, 10:51 AM
I'm not happy that I can't do this.

I can do a lot but not this! And I have searched high and wide online.

Just want to swap an image (thumb) for a larger one - in the same spot - then click on the large image and go back to the small one.

Nothing I have tried works but I KNOW it can be done - can't it?

If anyone can help, I would be grateful.

Thanks,

Terry

coothead
07-03-2006, 01:00 PM
Hi there tpeck,

have a look at this simple example, it may give you some ideas...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://achelous.mysite.wanadoo-members.co.uk/"> <!--this line should be removed when using your own images//-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
#container {
text-align:center;
}
.thumb {
width:50px;
height:50px;
margin-top:225px
}
.bigpic {
width:300px;
height:300px;
margin-top:100px
}
-->
</style>

<script type="text/javascript">
<!--
window.onload=function() {
document.getElementById('pic').onclick=function() {
if(this.className=='bigpic') {
this.className='thumb';
}
else {
this.className='bigpic';
}
}
}
//-->
</script>

</head>
<body>

<div id="container">
<img id="pic" class="thumb" src="ball_shad.jpg" alt=""/>
</div>

</body>
</html>
coothead

Bill Posters
07-03-2006, 02:10 PM
Depending on the actual circumstances…

You may actually be better toggling the img src, rather than using the larger copy as the thumb, as well.
By using proper thumbnails (and toggling to a larger copy), you don't inflict lengthier download times on users who may not click on each thumbnail.

Just a thought.

e.g.

window.onload = function() {

document.getElementById('pic').onclick=function() {
this.src = (this.src=='ball_shad.jpg') ? 'ball_shad_thumb.jpg' : 'ball_shad.jpg';
}

}
(It's basically the same process as Coothead's. It just uses a different approach (namely a 'ternary conditional') to structuring the if… else phrase.)

tpeck
07-03-2006, 03:07 PM
Thanks. I think I understand the idea behind both posts and putting it together I get this (I've omitted nice but extraneous stuff for the post):

<html>
<head>
<style type="text/css">
<!--
.thumb {
width:116px;
height:125px;
margin-top:225px
}
.bigpic {
width:559px;
height:600px;
margin-top:100px
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function() {
document.getElementById('pic').onclick=function() {
this.src = (this.src=='../assets/images/art/art2.gif') ? '../assets/images/art/art2th.gif' : '../assets/images/art/art2.gif';
if(this.className=='bigpic') {
this.className='thumb';
}
else {
this.className='bigpic';
}
}
}
//-->
</script>
</head>

<body>
<img id="pic" class="thumb" src="../assets/images/art/art2th.gif">
</body>

</html>

**********************************

On clicking, the thumb becomes the bigpic, but when clicking again it's a mini version of the bigpic instead of the thumb. It looks all squeezed up.

Also, I have at least 6 pictures per page. Is there an multi-function version?

Terry

coothead
07-03-2006, 03:13 PM
Hi there Bill,

you caught me out again, being a little bit lazy. :o :o :o
To rectify this I have made a thumbnail, and amended the script.
Unfortunately your 'ternary conditional' appears to only works from 'thumbnail' to 'bigger image' but not in reverse, so....

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://coothead.mysite.wanadoo-members.co.uk/pop_up_gallery/"/> <!--this line should be removed when using your own images//-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
#container {
text-align:center;
}
.thumb {
margin-top:225px;
}
.bigpic {
margin-top:105px;
}
-->
</style>

<script type="text/javascript">
<!--
window.onload = function() {
var test=0;
document.getElementById('pic').onclick=function() {
if(test==1) {
this.src= 'ball_shad_thumb.jpg';
this.className='thumb';
test=0;
}
else {
this.src='ball_shad.jpg';
this.className='bigpic';
test=1;
}
}
}
//-->
</script>

</head>
<body>

<div id="container">
<img id="pic" class="thumb" src="ball_shad_thumb.jpg" alt=""/>
</div>

</body>
</html>
Of course, you may be able to simplify this further, for my edification. :D
coothead

tpeck
07-03-2006, 03:42 PM
Thanks. It works well now.

Is it easy to make it work for more than 1 pic on a page?

Stripping it to the bare necessities:

<html>
<head>
<script type="text/javascript">
<!--
window.onload = function() {
var test=0;
document.getElementById('pic').onclick=function() {
if(test==1) {
this.src= 'thumb.gif';
test=0;
}
else {
this.src='full.gif';
test=1;
}
}
}
//-->
</script>
</head>

<body>
<img id="pic" src="thumb.gif">
</body>
</html>

Bill Posters
07-03-2006, 04:41 PM
Unfortunately your 'ternary conditional' appears to only works from 'thumbnail' to 'bigger image' but not in reverse, so....
I forgot that 'reading' returns the full url of the img, not just the filename.

Soon fixed though…

window.onload = function() {

document.getElementById('pic').onclick = function() {
imgObj.onclick = function() { this.src = (this.src.indexOf('ball_shad.jpg') != -1) ? 'ball_shad_thumb.jpg' : 'ball_shad.jpg' }
}

}

coothead
07-03-2006, 04:53 PM
Thanks for that Bill,

Now the OP wants multiple image clicking, so what do you think of this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://coothead.mysite.wanadoo-members.co.uk/pop_up_gallery/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#container img {
border:1px solid #000;
margin:10px 4px;
float:left;
}
-->
</style>

<script type="text/javascript">
<!--
window.onload = function() {

var pics=new Array();
pics[0]='ball_shad_thumb.jpg,ball_shad.jpg';
pics[1]='dog_thumb.jpg,dog.jpg';
pics[2]='girl_thumb.jpg,girl.jpg';
pics[3]='aaa_thumb.jpg,aaa.jpg';

var ims=document.getElementById('container').getElementsByTagName('img');

for(c=0;c<ims.length;c++) {
document.getElementById('pic'+c).onclick=function() {

n=this.id.split('pic')[1];

if(this.className=='bigpic') {
this.src= pics[n].split(',')[0];
this.className='thumb';
}
else {
this.src=pics[n].split(',')[1];
this.className='bigpic';
}
}
}
}
//-->
</script>

</head>
<body>

<div id="container">
<img id="pic0" class="thumb" src="ball_shad_thumb.jpg" alt=""/>
<img id="pic1" class="thumb" src="dog_thumb.jpg" alt=""/>
<img id="pic2" class="thumb" src="girl_thumb.jpg" alt=""/>
<img id="pic3" class="thumb" src="aaa_thumb.jpg" alt=""/>
</div>

</body>
</html>
coothead

Bill Posters
07-03-2006, 06:26 PM
I'd be inclined to do a simple replace() on portions of the filename.
The only requirement is that you add either _full or _thumb to the stem of the filename.
You can then use js to check for the presence of (e.g.) _full in the src and, if found, replace it with _thumb.
It can be made to toggle.

e.g.

window.onload = setToggle;

function setToggle() {

var imgObjs = document.getElementById('pics').getElementsByTagName('img');
for (var i = 0, thisImg; thisImg = imgObjs[i]; i++) {
thisImg.onclick = function() { this.src = (this.src.indexOf('_thumb.') != -1) ? this.src.replace('_thumb.','_full.') : this.src.replace('_full.','_thumb.') }
}

}
(Note that the search strings include a trailing full-stop/period. This is to ensure that the filename stem is being changed rather than another instance of _thumb or _full which might appear somewhere in the src url.)

demo (http://test.newplasticarts.co.uk/toggle_thumbnail_img/index.html)

Just name the thumbs and fullsize images accordingly, place them within the pics div* and the script will take care of the rest. No need for naming arrays or splitting src attributes.
(* thumbnails img elements could alternatively be targeted according to the use of a specific className or even purely on the presence of _thumb in their src attribute, if for example, you had thumbnails scattered throughout a page, but wanted them all to be clickable/togglable and didn't want to add a class to each image.)

coothead
07-03-2006, 08:37 PM
Thanks Bill,

That's excellent.:)

Five lines of code, instead of my seventeen. ;)
That certainly helps in the fight against code bloat. :D

coot

tpeck
07-04-2006, 03:41 AM
Well, thanks peoples - it all works nicely.

Very grateful for your help. Definitely in my collection of usefulnesses.

Terry



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum