473,385 Members | 1,707 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > displaying bigger pictures when click on the thumbnail (onclick event)

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

Displaying bigger pictures when click on the thumbnail (onclick event)

Please can anyone help with a javascript code to display bigger pictures me.jpg, me2.jpg.... on the same page by clicking on their thumnails on the same page.

I have done what i believe is the right thing but still doesnt work. Below is my code:


Pictures are in the same folder as the Html file to keep things simple
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3.  
  4. <!-- Set up a Javascript Script to handle the mouseOver events: AJAX effect -->
  5.  
  6.  <SCRIPT language="JavaScript">
  7.          var XMLHttpRequestObject = false;
  8.  
  9.          if (window.XMLHttpRequest)
  10.              {
  11.              XMLHttpRequestObject = new XMLHttpRequest();
  12.              }
  13.          else if (window.ActiveXObject) {
  14.              XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  15.              }
  16.  
  17.  
  18.  
  19.          function getData(dataSource, divID)
  20.              {
  21.              if(XMLHttpRequestObject)
  22.                  {
  23.                  var obj = document.getElementById(divID);
  24.                  XMLHttpRequestObject.open("GET", dataSource);
  25.  
  26.                  XMLHttpRequestObject.onreadystatechange = function()
  27.                      {
  28.                      if (XMLHttpRequestObject.readyState == 4 &&
  29.                      XMLHttpRequestObject.status == 200) {
  30.                      obj.innerHTML = XMLHttpRequestObject.responseText;
  31.                      }
  32.                  }
  33.  
  34.                  XMLHttpRequestObject.send(null);
  35.                  }
  36.              }
  37.   </script>
  38.  
  39.  
  40. <TITLE>
  41. Picture Gallery
  42. </TITLE>
  43.  
  44. </HEAD>
  45.  
  46. <BODY BACKGROUND="pic2.jpg">
  47.  
  48. <TABLE ALIGN="left" WIDTH="100%">
  49. <TR ALIGN="left">
  50.  
  51. <TD width= "50%" colspan = 2>
  52. <table border =1 bordercolor= "orange">
  53.     <tr ><TD><img src= "me.jpg" width="244" height="163" onmouseover="getData('me.jpg', 'targetDiv')"></td>
  54.     <td><img src= "me2.jpg" width=244 height=163 onmouseover="getData('me2.jpg', 'targetDiv')"></td></tr>
  55.     <tr><TD><img src= "me3.jpg" width=244 height=163></TD></tr>
  56.     <tr><td><img src= "me4.jpg" width=244 height=163></td></tr>
  57.     <tr><td><img src= "me&bisi.jpg"  width=244 height=163></td></tr>
  58. </table>
  59. </TD>
  60.  
  61.  
  62. <TD width= "50%" bgcolor= "">
  63. <!-- Area for the display of the text generated by the mouseOver event -->
  64. <center>
  65. <div id="targetDiv"></div>
  66. </TD>
  67.  
  68. </TR>
  69. </TABLE>
  70.  
  71.  
  72. </BODY>
  73. </HTML>
Jul 30 '07 #1
1 1995
pbmods
5,821 Expert 4TB
Heya, greatjuli. Welcome to TSDN!

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

It looks like you may be using a sledge hammer when a ball-peen will do the trick.

Try this instead:
Expand|Select|Wrap|Line Numbers
  1. function getData(dataSource, divID)
  2. {
  3.     document.getElementById(divID).src = dataSource;
  4. }
  5.  
Jul 30 '07 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

7
Displaying Images ?
by: Vinay | last post by:
Hi All: I have a small application that stores images either in the database or as files (depending on the user preference). I'm in the process of providing a web interface to this application....
.NET Framework
3
Displaying data in datagrid problem
by: vinayak | last post by:
Hi I am displaying data in Datagrid in ASP.NET with Edit/Update functionality for each row. On the same page I have 2 Button controls which submits the request to server. These button controls...
ASP.NET
7
Displaying Images ?
by: Vinay | last post by:
Hi All: I have a small application that stores images either in the database or as files (depending on the user preference). I'm in the process of providing a web interface to this application....
ASP.NET
7
Displaying Images ?
by: Vinay | last post by:
Hi All: I have a small application that stores images either in the database or as files (depending on the user preference). I'm in the process of providing a web interface to this application....
.NET Framework
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
How to build RAID in BIOS?
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...
Computer Hardware
0
Oralloy
Problem With Comparison Operator <=> in G++
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,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
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...
Online Marketing

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!