clicking small image to show a big image

H

handersonVA

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?
 
D

David Dorward

handersonVA said:
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="...">
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).
 
?

.:|:.

handersonVA said:
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=picFile[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

..:|:.
 
R

Randy Webb

..:|:. said the following on 11/28/2005 5:17 PM:
handersonVA said:
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=picFile[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.
 
M

McKirahan

handersonVA said:
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.
 
T

Thomas 'PointedEars' Lahn

Jasen said:
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
 
T

Thomas 'PointedEars' Lahn

Jasen said:
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/transla....html&langpair=de|en&ie=Unknown&oe=ISO-8859-1>


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top