I have made the html+javascript code.According to which when the page loaded the image size gets reduced to 50,50 and onclicking on it ,size increases to 500,500,but i done it with the one copy of image
But i want the click at thumnail of photos and display the full resolution of thumnail. - <html>
-
<body>
-
<body onload="changeIt();">
-
<head>
-
-
<script langauge="javascript">
-
var count=1;
-
function changeIt()
-
{
-
-
var width=50;
-
var height=50;
-
document.TheImage.width=width
-
document.TheImage.height=height
-
-
-
}
-
function changeeIt()
-
-
{
-
if(count==1)
-
{
-
var width=500
-
var height=500
-
document.TheImage.width=width
-
document.TheImage.height=height
-
count=2;
-
}
-
else if(count==2)
-
{
-
var amrit1=50
-
var pal=50
-
document.TheImage.width=amrit1
-
document.TheImage.height=pal
-
count=1;
-
-
}
-
-
-
}
-
-
-
-
</script>
-
</head>
-
-
-
-
-
-
-
<img src="/home/administrator/Desktop/aa" name="TheImage" onclick="changeeIt();">
-
-
-
-
<BR>
-
-
-
</body>
-
</html>
Please somebody help ,thanks in advance.
18  4772  acoder 16,027
Recognized Expert Moderator MVP
You should make a generic function which either takes the image name, ID or a reference to the image itself. Then replace "document.TheIm age." with document.images[imageName]. to reference the correct image.
Hi,
Have a look over this link
Thanks and Regards
Ramanan Kalirajan
i have a html cum javascript code.There are 2 images one is thumnail and other is full resolution of the same.When somebody click the thumnail ,the full resl. would show and when click of full resl. the thumnail would show.It is going well but problem is that ,when click of thumnail ,it replaces a distance to other images that is looking very strange.
I want that after clicking on thumnail it shoult show the full res. without effecting the other images on the same page.Please take the look at "http://highslide.com/".I want something like that.
This is my html cum javascript code - <html>
-
<head>
-
<script>
-
window.onload = start;
-
function start ()
-
{
-
allSmall ();
-
allTriggers ();
-
}
-
-
function allTriggers ()
-
{
-
var images = document.getElementsByTagName("img");
-
for (var i = 0, image; image = images[i]; i++)
-
image.onclick = othersSmallThisLarge;
-
}
-
function smallImage (image)
-
{
-
with (image.style) { width = 50; height = 50; }
-
}
-
-
function largeImage (image)
-
{
-
with (image.style) { width = 500; height = 500; }
-
}
-
-
function switchSize (image)
-
{
-
-
if ( (image.offsetWidth != 500) && (image.offsetHeight != 500) )
-
{
-
-
largeImage (image);
-
-
}
-
else
-
{
-
smallImage (image);
-
}
-
-
}
-
function switchResolution (image)
-
{
-
var previous = image.src;
-
image.src = image.getAttribute("data");
-
image.setAttribute("data", previous);
-
delete previous;
-
}
-
function allSmall ()
-
{
-
var images = document.getElementsByTagName("img");
-
for (var i = 0, image; image = images[i]; i++)
-
smallImage (image);
-
}
-
function othersSmallThisLarge ()
-
{
-
switchResolution (this);
-
switchSize (this);
-
}
-
</script>
-
</head>
-
<body>
-
-
<img src="thumnail's path" data="full resl'path" />
-
<img src="thumnail" data="full" />
-
</body>
-
</html>
You can also check this by running at your on system.
Thanks in advance
acoder 16,027
Recognized Expert Moderator MVP
If you want something like highslide, you'll need to move the image out of the flow of the page. Make the image position absolute (position:absolu te in CSS) with top/left settings.
Thanks for reply.I am new to javascript and know not more abou CSS.Even i dont know where to put Css code.Please can you elaborate or add Css code into above code.
Hope you would reply
acoder 16,027
Recognized Expert Moderator MVP
You could set it with JavaScript too: - img.style.position = "absolute";
However, I think you'd probably be better served reading up on a tutorial to grasp the basics (see Offsite Links sticky for JavaScript links) first, or using a library/framework to make things easier for you.
As you said i add this tag at Line no 63.
<img.style.posi tion = "absolute">
But it didnt effect.Again clicking on the images replaces a distance to others.
Dormilich 8,658
Recognized Expert Moderator Expert
that was not a tag, that was a JavaScript instruction.
Ok.but by adding that instrucion,it helped nothing .
Or that instruction is to be add elsewhere in the whole code?
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Deepa |
last post by:
Hi All,
I'm facing problem displaying image of size 5000X5000 .My window size
is smaller than image size so i'm not able to see the complete image.i
can use scroll bars to view the image but i need to rotate the image
and the see the result everytime.
For this my boss has given me suggestion to display only 20% of the
image on window ,and rotation has to be applied to original copy.
|
by: Ben Amada |
last post by:
Hi group. I'm going to display a low resolution image in an HTML page. On
the web server, I have a high resolution version of that image. If I
display the high resolution image in the browser for the visitor to print,
won't the DPI of the image be reduced to 72 dpi and lose resolution when the
visitor goes to print the image? If this is wrong, please let me know. If
this is correct, is there a way in JavaScript to be able to send the...
|
by: Varangian |
last post by:
How can I make a Image Click working before Page Load event?
The Problem I'm getting is that I'm loading an ImageButton dynamically
from a Web User Control. How can I make the Web User Control
ImageButton return a value to the main Page ?
Thanks and sorry for already posting this...
|
by: Brett Wesoloski |
last post by:
I am having problems getting the index of an image click event in a
datagrid. Every time I look at the index it is -1.
What I am trying to do is get the index of the row in which the imagebutton
was clicked. So that I can then go and look into a hidden field as to what
the value will be that I need to use.
I am using a template column to create the imagebutton.
<asp:TemplateColumn HeaderText="">
|
by: Ahmd |
last post by:
Pls look at this code, i want to call this function from an image
click event.
CPage=Cint(Request.Form("CurrentPage")) 'get CPage value from form's
CurrentPage field
Select Case Request.Form("Submit")
Case "Previous" 'if prev button pressed
CPage = Cint(CPage) - 1 'decrease current page
Case "Next" 'if next button pressed
| | |
by: nagamalli26 |
last post by:
hi iam new php
i want php code for display full resume
please send my mail_id
|
by: ranjeshh |
last post by:
How do I display a jpeg image using c..Please gude me as I m new to image processing..I would appreciate if someone could give me a working code with explanation
|
by: ameshkin |
last post by:
I have a checkbox with an ID of svc_tp_1, and an image that
corresponds with this checkbox below it.
<input type="checkbox" name="checkbox" id="svc_tp_1" value="svc_tp_1" /
<img src="images/screen_print.jpg" onclick="toggle('svc_tp_1'); return
true;" />
I know how to get the checkbox to check when the image is clicked, but
what I really want is a toggle. When a user clicks on the image, the
system should first check to see if svc_tp_1...
|
by: msmjsuarez |
last post by:
how can i display both image and other information in the web page using php?
i'm using mysql database.
I do displaying the image only but i want to display both other information from the database and the image from the database also in one web page...
how can i do this?
pls help.....
thanks.
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
| | |
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
