Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > clicking small image to show a big image

Reply
Thread Tools

clicking small image to show a big image

 
 
handersonVA
Guest
Posts: n/a
 
      11-28-2005
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?


 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      11-28-2005
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
 
Reply With Quote
 
 
 
 
.:|:.
Guest
Posts: n/a
 
      11-28-2005
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

..:.
 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      11-28-2005
..:. 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/
 
Reply With Quote
 
McKirahan
Guest
Posts: n/a
 
      11-28-2005
"handersonVA" <(E-Mail Removed)> 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='cursorointer; 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.


 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-30-2005
Jasen Betts wrote:

> On 2005-11-28, handersonVA <(E-Mail Removed)> 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
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-01-2005
Jasen Betts wrote:

> On 2005-11-30, Thomas 'PointedEars' Lahn <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
GIDS 2009 .Net:: Save Big, Win Big, Learn Big: Act Before Dec 29 2008 Shaguf ASP .Net 0 12-26-2008 09:29 AM
GIDS 2009 .Net:: Save Big, Win Big, Learn Big: Act Before Dec 29 2008 Shaguf ASP .Net Web Controls 0 12-26-2008 06:11 AM
GIDS 2009 Java:: Save Big, Win Big, Learn Big: Act Before Dec 29 2008 Shaguf Python 0 12-24-2008 07:35 AM
GIDS 2009 Java:: Save Big, Win Big, Learn Big: Act Before Dec 29 2008 Shaguf Ruby 0 12-24-2008 05:07 AM
Small Image Hover Views Big Image (Not Separate Window, though) Jason Heydasch Javascript 1 02-01-2004 03:16 AM



Advertisments