Hi,
I have a table with 4 cells - 3 on the left containing 3 thumnails and 1 cell on the right to hold the enlarged image.
So when I click on the thumnail then the enlarged one should display on the right cell.
Below is my code and so far is not working - enlarged image displayed on the seperate page.
Can anyone help me with the scripts below?
thank you so much, - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<TITLE> New Document </TITLE>
-
<meta http-Equiv="Cache-Control" Content="no-cache">
-
<meta http-Equiv="Pragma" Content="no-cache">
-
<meta http-Equiv="Expires" Content="0">
-
-
<script language="javascript">
-
function enlargeme()
-
{
-
-
var bigpic=document.getElementById('img1');
-
bigpic.src="http://www.isdntek.com/tagbot/misc/dustyroses.jpg";
-
bigpic.width=200;
-
bigpic=height=200;
-
}
-
</script>
-
-
<BODY>
-
<TABLE BORDER=1 WIDTH=70%>
-
<TR>
-
<TD>
-
<TABLE BORDER=1 WIDTH=100%>
-
<TR>
-
<TD><a href='http://www.isdntek.com/tagbot/misc/dustyroses.jpg' onclick='enlargeme()'>
-
<img src='http://www.isdntek.com/tagbot/misc/dustyroses.jpg' width='72' height='72' hspace='2' border='0' style='border:0px ridge white' src='http://www.isdntek.com/tagbot/misc/dustyroses.jpg'></a>
-
-
</TD>
-
-
<TD>2nd img</TD>
-
</TR>
-
-
<TR>
-
<TD>3nd img</TD>
-
-
<TD>4th img</TD>
-
</TR>
-
</TABLE>
-
</TD>
-
-
<TD>
-
<TABLE>
-
<TR>
-
<td align='center' width='408' height='308'>
-
<img src='http://www.isdntek.com/tagbot/misc/bambi.jpg' id='img1' width='300' height='300' style='border:0px ridge white'>
-
</td>
-
</TR>
-
-
</TABLE>
-
</TD>
-
</TR>
-
</TABLE>
-
-
</BODY>
-
-
</HTML>
7  2980 
to get started a little note. though it is not necessary for HTML it is recommended to write the tag and attribute names either upper- or lowercase (should not be mixed)
you get forwarded to the next page, because you use a valid link. so you have 3 options.
- omit the href
- suppress the href
- omit the link (my recommendation)
the next thing to do would be a way to store somewhere the information you need for the big picture, so you can use the same function for every thumbnail.
at last you only need to associate the event with the image.
ex. - // standard compliant (not IE)
-
// the actual code also depends on how enlargeme() works
-
-
// this triggers the function enlargeme() whenever you click on the element
-
// (img) with the ID "thumb1"
-
document.getElementById("thumb1").addEventListener("click", enlargeme, false);
Thanks for the reply.
But if I embed this javascript, then I can direct this enlarged image to the cell - it is working.: - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<TITLE> New Document </TITLE>
-
<META NAME="Generator" CONTENT="EditPlus">
-
<META NAME="Author" CONTENT="">
-
<META NAME="Keywords" CONTENT="">
-
<META NAME="Description" CONTENT="">
-
</HEAD>
-
-
<BODY>
-
<TABLE BORDER=1 WIDTH=70%>
-
<TR>
-
<TD>
-
<TABLE BORDER=1 WIDTH=100%>
-
<TR>
-
<TD><a href="dress1.gif"
-
onclick="bigPic=document.getElementById('clicpicLg482');
-
bigPic.src='dress1.gif'; bigPic.width=400; bigPic.height=300;
-
return false;"><img src="dress1.gif" width="72" height="72" hspace="2" border="0" style="border:0px ridge white" src="dress1.gif"></a></TD>
-
-
<TD><a href="dress1.gif"
-
onclick="bigPic=document.getElementById('clicpicLg482');
-
bigPic.src='dress1.gif'; bigPic.width=400; bigPic.height=300;
-
return false;"><img src="dress1.gif" width="72" height="72" hspace="2" border="0" style="border:0px ridge white" src="dress1.gif"></a></TD>
-
-
</TR>
-
-
<TR>
-
<TD><a href="dress1.gif"
-
onclick="bigPic=document.getElementById('clicpicLg482');
-
bigPic.src='dress1.gif'; bigPic.width=400; bigPic.height=300;
-
return false;"><img src="dress1.gif" width="72" height="72" hspace="2" border="0" style="border:0px ridge white" src="dress1.gif"></a></TD>
-
-
-
<TD><a href="http://www.isdntek.com/tagbot/misc/dustyroses.jpg";
-
onclick="bigPic=document.getElementById('clicpicLg482');
-
bigPic.src='http://www.isdntek.com/tagbot/misc/dustyroses.jpg'; bigPic.width=300; bigPic.height=300;
-
return false;"><img src="http://www.isdntek.com/tagbot/misc/dustyroses.jpg" width="72" height="72" hspace="2" border="0" style="border:0px ridge white"
-
src="http://www.isdntek.com/tagbot/misc/dustyroses.jpg" ></a></TD>
-
-
</TR>
-
</TABLE>
-
</TD>
-
-
<TD>
-
<TABLE>
-
<TR>
-
<td align="center" width="408" height="308">
-
<img src="http://www.isdntek.com/tagbot/misc/bambi.jpg" id="clicpicLg482" width="300" height="300"
-
alt="Click to Enlarge" style="border:0px ridge white">
-
</td>
-
</TR>
-
</TABLE>
-
</TD>
-
</TR>
-
</TABLE>
-
-
</BODY>
-
</HTML>
basically I can not put getelementbyId() into the PHP script - it is PHP script in the main body. It is always failure...
thanks,
@JulieQ
that’s why javascripts are often put into external files—completely unaffected by any server scripts (and it’s way better to maintain, too)
btw, Welcome at Bytes.com
please use [CODE] // source code comes here [/CODE] when posting code
can you somehow make it work? it is still not working, even i put outside my script....
@JulieQ
you have to be aware that you have to delay the event assignment until the body finished loading… I’ll look into it.
there you have a working example to go on. I know that there are some limitations, but it shows you the general course of action. - <?xml version="1.0" encoding="utf-8" ?>
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
-
<head>
-
<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8" />
-
<title>test centre</title>
-
// <![CDATA[
-
// one function of my personal library
-
function createCustomElement(name, text, attr)
-
{
-
// create element and its text content
-
var CE = document.createElement(name);
-
var TN = document.createTextNode(text);
-
CE.appendChild(TN);
-
-
// attach attributes listed in attr object
-
for (var j in attr)
-
{
-
var CA = document.createAttribute(j);
-
CA.nodeValue = attr[j];
-
CE.setAttributeNode(CA);
-
}
-
-
return CE;
-
}
-
-
function show()
-
{
-
// create <img> with fixed values
-
var pic = createCustomElement("img", "", {src: this.src, width: 200, height: 200, alt: "zoomed image"});
-
-
// target element
-
var frame = document.getElementById("enlarge");
-
-
// remove previous images
-
while (frame.firstChild)
-
{
-
frame.removeChild(frame.firstChild);
-
}
-
-
// insert new image
-
frame.appendChild(pic);
-
}
-
-
// wait until document finished loading
-
window.onload = function() {
-
// get all images to enlarge
-
var NL = document.getElementsByClassName("zoom");
-
-
// obviously you can put this in a loop
-
NL[0].addEventListener("click", show, false);
-
NL[1].addEventListener("click", show, false);
-
}
-
// ]]>
-
</script>
-
</head>
-
<body>
-
<div>
-
<!-- style='border:0px ridge white' => style='border:0' -->
-
<img src='http://www.isdntek.com/tagbot/misc/dustyroses.jpg' width='72' height='72' style='border:0' class="zoom" />
-
</div>
-
<div>
-
<img src='http://www.isdntek.com/tagbot/misc/apples.jpg' width='80' height='60' style='border:0' class="zoom" />
-
</div>
-
<div id="enlarge"/>
-
</body>
-
</html>
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Max Quordlepleen |
last post by:
Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.
I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean...
|
by: TJ |
last post by:
I've got a calendar that is based on the concept of lots of blocks that are
spans with float:left. I would like to be able to have a detail section on
the right side of the screen, so that when...
|
by: Florian Brucker |
last post by:
There are several tutorials on the net showing you how to create a
thumbnail gallery with floating thumbails which automagically uses all
horizontal space available (e.g....
|
by: ted |
last post by:
Hi,
Was wondering if it's possible to find the left position of a table cell if
the cell is created dynamically.
I have a table with a single cell. When a button is clicked, I'd like to add...
|
by: Stevie D |
last post by:
Hi I'm a Javascript newbie
I'm doing a 'simple' (basically adding pages and changing text in frontpage
2000) update of a web site for a friend - what I have done 'should not' have
done anything...
|
by: UJ |
last post by:
I have a long list of items that the user will be able to select from. When
they select an item, I'd like to have more detailed information appear on
the right side of the screen. I've already got...
|
by: rudicheow |
last post by:
SHORT VERSION
=============
I have a bunch of identical fixed-size single-celled tables that rest
against each other horizontally thanks to "float:left". These tables
are dynamically generated...
|
by: ashasprabhu |
last post by:
hai,
I have to convert the images size into thumbnail and when the image is clicked the page is redirected and image should be enlarged.I tried to use the height and width property but the image is...
|
by: Casimir Pohjanraito |
last post by:
I have a list of links, with a thumbnail image hidden(resized) next to
the link. Complete html&css at end of this post.
CSS for the link resizes the image on a:hover. All is good,
except the...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |
