Need to show the larger image when user clicks on the small image

hello,

Can any one please tell me

I am Using php,Mysql,CSS to build my site

In my database i have small images and large images
i am show the small images to the right of the main container now i need to show the large image to left side when user clicks on these small images
but when i click on the images it is showing the large image in the new browser

hope u understand my problem
please tell me what wrong am i doing

here is my code

Expand|Select|Wrap|Line Numbers

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Untitled Document</title>                                        
 
 <style type="text/css">

 #container

 {

     float:left;

     border:5px solid #666;  

     position:relative; 

     width:770px; 

     height:450px; 

     margin:20px auto 0 100px;

     top:-20px;

 }
 
 .styles

 {

     text-align:center;

     margin:190px 390px 0px 20px;    

 }

 #container1

 {

     float:right;

     border:1px solid #9F0;

     padding:3px;

     height:445px; 

     width:355px;

     margin:-250px 0px 0px 0px;

 }

 .yourstyle

 {

 position:absolute;

 left:0px;

 top:-2px;
 
 }
 
 </style>            
 
 </head>
 
 <?php

            function connect()

            {

               $dbhost='aaa';

               $dbuser='aa';

               $dbpass='aaa';

               $conn= mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'.mysql_error());

               $dbname='hakman';

               mysql_select_db($dbname);

               return $conn;

            }

 ?>
 
 <body bgcolor="#0a1936" >
 
 <div id="container">
 
 <p class="styles"><font color="#FFFFFF" face="Monotype Corsiva" size="+2">
 
 Image should be shown here when user clicks
 
 </font></p>
 
 <?php 

 $c=connect(); 

 $query2="select style from styles"; 

 $sql=mysql_query($query2); 

 $result2=mysql_num_rows($sql);  //25
 
 $query="select path from styles "; //0 to 6

 $result=mysql_query($query);                                    
 
 $query1="select big_img from styles "; //0 to 6

 $result1=mysql_query($query1);                                    
 
 $query3="select style,path from styles ";

 $result3=mysql_query($query3); 
 
 ?>

      <div id="container1">

                 <?php

                         echo '<table border="1" align="right" width="50px" height="375px" BORDERCOLOR="#9F0">'; 

                         for($r=1;$r<=4;$r++) 

                         { 

                             echo '<tr>'; 

                             for($d=1;$d<=2;$d++) 

                             { 

                                  $obj=mysql_fetch_object($result);

                                  $obj1=mysql_fetch_object($result1);

                                  $obj2=mysql_fetch_object($sql);    

                                  $obj3=mysql_fetch_object($result3);

                                  $imageSrc=$obj->path; 

                                  $cimage="/images/".$obj->path; 

                                  $big="/images/".$obj1->big_img; 

                                  $styl=$obj3->style; 

                                  $sty2=$obj3->style; 
 
             echo '<td><a title="'.$styl.'" href="'.$big.'" id="'.trim($sty2).'"><img width="170px" height="100px" src=" ' . $cimage . ' " /></a></td>'; 
 
                  ?>       

       </div>            

        <div class="yourstyle" id="<?php echo trim($sty2).'-big'?>"></div>     
 
                  <?php 
 
       }       

       echo '</tr>';

     } 

 echo'</table>';?>
 
   </div>
 
   ?>       
 
</body>

 </html>

Dec 20 '08 #1

Subscribe Post Reply

2490

Markus

6,050

Expert 4TB

Hi, swetha123, and welcome to the forums.

It is a requirement that, when posting code in your post, you wrap it with [code] ... [/code] tags. This helps our experts read your code as it is formatted. This, in turn, then helps our experts with answering your question. In future, please follow this guideline. You can find other guidelines here - please take a second to read over them, so you can avoid any warnings in the future.

Thanks,
Moderator.

Dec 20 '08 #2

Markus

6,050

Expert 4TB

Let me just say Javascript would be a much more efficient way of doing this.

Why is your image opening as a new page?

That's because you provide a link to the image in the form of <a href="...">. Of course, if the user clicks this, they will be taken to the image's location.

How about, instead of passing the image's location in your href attribute, you pass an identifier for the image to the current URL. That way you can get the ID using $_GET and then use that for the large image's src attribute.

Again, I suggest using Javascript, though.

Thanks,
Markus.

Dec 20 '08 #3

hsriat

1,654

Expert 1GB

Change line 106:

Expand|Select|Wrap|Line Numbers

 echo '<td><a title="'.$styl.'" href="#bigImage" onclick="this.parentNode.getElementsByTagName('img')[0].src=\''.$big.'\'; return false;" id="'.trim($sty2).'"><img src=" ' . $cimage . ' " /></a></td>';
 

Dec 20 '08 #4

by: Al Davis | last post by:

Note: I tried cross-posting this message to several newsgoups, including comp.lang.perl.misc, c.l.p.moderated, comp.infosystems.www.authoring.cgi, comp.lang.javascript and comp.lang.php. Nothing...

PHP

Image swap problem with preloading

by: Stevio | last post by:

In my web page I preload images so that when a user clicks on a part of the image, the image changes. The images are used to display 4 tabs. Each image shows a different tab as highlighted. If a...

Javascript

HELP: need to customize the size of the window.open window for different links

by: jdapro | last post by:

Hi - thanks for reading this out there! I'll be quick about it: I've got this row of images (in the end there will be more rows of pics as well). When a user clicks on the image, I want a new...

Javascript

Need Help with Multi Form handling

by: Tim Geiges | last post by:

Since I am being challenged with learning c# I figured I could pass some of the pain on to you guys :-) I have another question(this one is important for me to fix before I can get my app to Beta)...

C# / C Sharp

DDL Image runs slow, need suggestion on optimization

by: Beemer Biker | last post by:

I have a 10 row (per page) gridview where the first column is a small image under 100x200px and the second column is a DropDownList template that selects which image to show in the first column. ...

ASP.NET

Mouse-over image and zoom to larger size dynamically?

by: =?Utf-8?B?Tm9ibGUgQmVsbA==?= | last post by:

Hello, I want to know how I can do the following in ASP.Net 2.0: I want to be able to mouse-over a small image and then have it dynamically zoom into a larger image. When the larger image is...

ASP.NET

Need to show the larger image when user clicks on the small image using database

by: swetha123 | last post by:

hello, Can any one please tell me I am Using php,Mysql,CSS to build my site In my database i have small images and large images i am show the small images to the right of the main container...

HTML / CSS

Need Help with changing css on an object using jQuery

by: zeckdude | last post by:

Hi, I am having some issues with my site. I have a main Nav with four links that load in 4 different sections. You can see the page I am working on here:...

Javascript

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

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

Is that possible of reading the .csv file in column wise and the column have different lengths ?

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...

C / C++

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

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++

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

The easy way to turn off automatic updates for Windows 10/11

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...

Windows Server

AI Job Threat for Devs

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,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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...

Microsoft Access / VBA

Need to show the larger image when user clicks on the small image

Similar topics