473,320 Members | 1,978 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

clicking small image to show a big image

Hello,
I'd like to put small images around a big image, so when a small image is
clicked, that image is shown as a big image in the center.
how should I do that? I will use a table tag to organize the images, but how
can I make this thing happen?
Nov 28 '05 #1
8 6300
handersonVA wrote:
I'd like to put small images around a big image, so when a small image is
clicked, that image is shown as a big image in the center.
how should I do that?
<a href="a-near-identical-page-with-a-different-image-in-the-middle.html">
<img src="..." alt="...">
</a>
I will use a table tag to organize the images


It doesn't /sound/ like tabular data. An unordered list would probably be
more appropriate (although with suitable CSS to create the layout you
want).

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Nov 28 '05 #2
handersonVA wrote:
Hello, I'd like to put small images around a big image, so when a
small image is clicked, that image is shown as a big image in the
center. how should I do that? I will use a table tag to organize
the images, but how can I make this thing happen?


The click on the small picture calls a function containing this:
document.getElementById("IDofBigPicture").src=picF ile[x]

This tells the browser to put the imagefile whose name is contained
in the variable "picFile[x]" in the html element with the given ID.

The big picture appears where you've placed the tag
<img id="IDofBigPicture" src="defaultPicture.jpg"... />

Better to have an array of variables
picFile[0] = "bigPicture0.jpg";
picFile[1] = "bigPicture1.jpg";
picFile[2] = "bigPicture2.jpg";
....

See what I've done:
html file:
http://tinyurl.com/8zknx
related javascript file:
http://tinyurl.com/db8v6

..:|:.
Nov 28 '05 #3
..:|:. said the following on 11/28/2005 5:17 PM:
handersonVA wrote:
Hello, I'd like to put small images around a big image, so when a
small image is clicked, that image is shown as a big image in the
center. how should I do that? I will use a table tag to organize
the images, but how can I make this thing happen?

The click on the small picture calls a function containing this:
document.getElementById("IDofBigPicture").src=picF ile[x]


No, the click on the small picture should call a function that contains
something more like this:

document.images['imageNAMEnotID'].src=someOtherFile.jpg

That is what the images collection is for - accessing images.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Nov 28 '05 #4
"handersonVA" <ha*********@hotmail.com> wrote in message
news:bpKif.23004$rB3.15657@dukeread02...
Hello,
I'd like to put small images around a big image, so when a small image is
clicked, that image is shown as a big image in the center.
how should I do that? I will use a table tag to organize the images, but how can I make this thing happen?

How about something like this. Watch for word-wrap. Test as-is.

<html>
<head>
<title>36images.htm</title>
<script type="text/javascript">
var http = "http://www.net4tv.com/voice/graphics/printables/";
var img1 = "83_?_sm.jpg";
var img2 = "83_?.gif";
var lets = "abcdefghijklmnopqrstuvwxyz";
var tag1 = "<img src='" + http + img1 + "' border='0' width='52' height='52'
alt='?' style='cursor:pointer; cursor:hand' onclick='img.src=\"" + http +
img2 + "\"'>";
var tag2 = "<img src='" + http + img2.replace(/\?/,"letter_a") + "'
border='0' width='416' height='416' alt='' name='img'>";
var tags;
var what;
var e = 0;
var tabl = new Array();
tabl[e++] = "<table border='0' cellpadding='0' cellspacing='0'
width='522' style='border:solid 1px black'>";
tabl[e++] = "<caption><b>Click a character and see the center
change!</b></caption>";
tabl[e++] = "<tr>";
tabl[e++] = " <td colspan='3'>";
tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
tabl[e++] = " <tr>";
for (var i=8; i<18; i++) {
what = "letter_" + lets.substr(i,1);
tags = tag1.replace(/\?/g,what);
tabl[e++] = " <th>" + tags + "</th>";
}
tabl[e++] = " </tr>";
tabl[e++] = " </table>";
tabl[e++] = " </td>";
tabl[e++] = "</tr>";
tabl[e++] = "<tr>";
tabl[e++] = " <td width='52'>";
tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
for (var j=7; j>-1; j--) {
what = "letter_" + lets.substr(j,1);
tags = tag1.replace(/\?/g,what);
tabl[e++] = " <tr><th>" + tags + "</th></tr>";
}
tabl[e++] = " </table>";
tabl[e++] = " </td>";
tabl[e++] = " <td width='416'>";
tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
tabl[e++] = " <tr><th style='border:solid 1px black'>" + tag2 +
"</th></tr>";
tabl[e++] = " </table>";
tabl[e++] = " </td>";
tabl[e++] = " <td width='52'>";
tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
for (var k=18; k<26; k++) {
what = "letter_" + lets.substr(k,1);
tags = tag1.replace(/\?/g,what);
tabl[e++] = " <tr><th>" + tags + "</th></tr>";
}
tabl[e++] = " </table>";
tabl[e++] = " </td>";
tabl[e++] = "</tr>";
tabl[e++] = "<tr>";
tabl[e++] = " <td colspan='3'>";
tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
tabl[e++] = " <tr>";
for (var l=0; l<10; l++) {
what = "number_" + l;
tags = tag1.replace(/\?/g,what);
tabl[e++] = " <th>" + tags + "</th>";
}
tabl[e++] = " </tr>";
tabl[e++] = " </table>";
tabl[e++] = " </td>";
tabl[e++] = "</tr>";
tabl[e++] = "</table>";
document.write(tabl.join("\n"));
</script>
</head>
<body>
</body>
</html>
I know that the dimensions of the images are not the actual.
Nov 28 '05 #5
On 2005-11-28, handersonVA <ha*********@hotmail.com> wrote:
Hello,
I'd like to put small images around a big image, so when a small image is
clicked, that image is shown as a big image in the center.
how should I do that? I will use a table tag to organize the images, but how
can I make this thing happen?


Something like this should work for most browsers.

<script type="text/javascript">
if ( typeof(bigimg)=="undefined" )
bigimg=document.getElementById("bigimg");
</script>

<img id="pigimg" src="bigpic0.gif" />

<img src="smallpic1.gif" onclick="bigimg.src='bigpic1.gif'" />
<img src="smallpic2.gif" onclick="bigimg.src='bigpic2.gif'" />
<img src="smallpic3.gif" onclick="bigimg.src='bigpic3.gif'" />

Bye.
Jasen
Nov 30 '05 #6
Jasen Betts wrote:
On 2005-11-28, handersonVA <ha*********@hotmail.com> wrote:
I'd like to put small images around a big image, so when a small
image is clicked, that image is shown as a big image in the center.
how should I do that? I will use a table tag to organize the images,
but how can I make this thing happen?
Something like this should work for most browsers.

<script type="text/javascript">
if ( typeof(bigimg)=="undefined" )


typeof is an operator, not a method. For the sake of Pretty Printing,
its operand should be delimited with whitespace, not parentheses.
bigimg=document.getElementById("bigimg");
Using features without proper feature test on runtime is considered
harmful: <http://www.pointedears.de/scripts/test/whatami>, § 2.

Variables should be declared before used.

if (typeof bigimg == "undefined"
&& typeof document != "undefined"
&& document.images)
{
var bigimg = document.images["bigimg"];
}
</script>

<img id="pigimg" src="bigpic0.gif" /> ^
Internet Explorer does not support XHTML. Any UA really supporting
HTML would parse this as <img id="pigimg" src="bigpic0.gif">&gt;

And probably you meant id="bigimg".
<img src="smallpic1.gif" onclick="bigimg.src='bigpic1.gif'" /> ^ ^ <img src="smallpic2.gif" onclick="bigimg.src='bigpic2.gif'" /> ^ ^ <img src="smallpic3.gif" onclick="bigimg.src='bigpic3.gif'" />

^ ^
And all those elements are missing the `alt' attribute value. Of
course the assignment will error if `bigimg' is still undefined,
hence it should take place guarded in a called method. Compare

<http://www.pointedears.de/scripts/test/hoverMe/>
PointedEars
Nov 30 '05 #7
On 2005-11-30, Thomas 'PointedEars' Lahn <Po*********@web.de> wrote:
HTML would parse this as <img id="pigimg" src="bigpic0.gif">&gt;

And probably you meant id="bigimg".
<img src="smallpic1.gif" onclick="bigimg.src='bigpic1.gif'" />

^ ^
<img src="smallpic2.gif" onclick="bigimg.src='bigpic2.gif'" />

^ ^
<img src="smallpic3.gif" onclick="bigimg.src='bigpic3.gif'" />

^ ^
And all those elements are missing the `alt' attribute value. Of
course the assignment will error if `bigimg' is still undefined,
hence it should take place guarded in a called method. Compare


or maybe a dummy bigimg object could be created, if bigimg couldn't be
referenced correctly Then it could have it's src attribute altered and
there would be no error.

How do you figure that <tag /> translates to <tag>&gt



Bye.
Jasen
Dec 1 '05 #8
Jasen Betts wrote:
On 2005-11-30, Thomas 'PointedEars' Lahn <Po*********@web.de> wrote:
HTML would parse this as <img id="pigimg" src="bigpic0.gif">&gt;

And probably you meant id="bigimg".
<img src="smallpic1.gif" onclick="bigimg.src='bigpic1.gif'" /> ^ ^
[...] Of course the assignment will error if `bigimg' is still
undefined, hence it should take place guarded in a called method.
[...]


or maybe a dummy bigimg object could be created, if bigimg couldn't be
referenced correctly Then it could have it's src attribute altered and
there would be no error.


True. But `bigimg' spoils the global namespace; image references
should be encapsulated in a user-defined object, as hoverMe does.
How do you figure that <tag /> translates to <tag>&gt


It translates to <tag>&gt; because of the NET delimiter /

,-<URL:http://www.w3.org/TR/html401/sgml/sgmldecl.html>
|
| [...]
| FEATURES
| MINIMIZE
| DATATAG NO
| OMITTAG YES
| RANK NO
| SHORTTAG YES
^^^^^^^^^^^^
| [...]

Further information:
[en] <URL:http://www.w3.org/TR/NOTE-sgml-xml.html>

Test case:
[de] <URL:http://www.dodabo.de/html+css/tests/shorttag.html>
[en] <URL:http://translate.google.com/translate?u=http%3A%2F%2Fwww.dodabo.de%2Fhtml%2Bcs s%2Ftests%2Fshorttag.html&langpair=de|en&ie=Unknow n&oe=ISO-8859-1>
PointedEars
Dec 1 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Raigo | last post by:
For a large product database on the web, with images for each product, I need to display a preview image (thumbnail) and a big image. So far I have done these things with Javascript using...
7
by: ABC | last post by:
I am a total newbie to javascript. I have only done Frontpage. I am trying to do a page of image show----I only managed to find a javascript to create pop up windows for the chosen image. Almost...
6
by: Trint Smith | last post by:
How can I show image thumbnail?? thanks, Trint ..Net programmer trintsmith@hotmail.com *** Sent via Developersdex http://www.developersdex.com *** Don't just participate in USENET...get...
0
by: Audrey | last post by:
Bonjour à ts, Est il possible d'accéder à une vidéo image par image ? Avec quel composant ? Je suis sur VS2003 et mon langage c'est C# Merci par avance
0
by: aparth | last post by:
I've been trying and failing to create an image map that contains a tiled background image underneath the main image. My image map is 600px in height. I want the main image (img_bottom.jpg) to...
2
by: rams083 | last post by:
how can i display an image on Image Control from Database, asp.net 2.0 vb? please help me... thank you for your reply...
1
by: basavaraj koti | last post by:
I need to show image using xslt Below provided in my xml and xslt. <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/xsl" href="../xyz.xsl"?> <Grade class="03"...
0
by: manjitsarma | last post by:
I need to display an image in 'Image Control' of aspx page.Now the image is displayed in the aspx page itself.But I need to display it in 'Image Control'.This is a map application and the image is...
5
by: faizalahmd | last post by:
How to display image in image control , which is retrieved from the data base . using c# in asp.net regards, FAIZAL AHMED.H
4
by: waqasahmed996 | last post by:
hi to all i want to show image on page in fix size of 300*300. images which have size more than that should also show in that size with same picture quality. is it possible? if yes how can i do...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.