Solved

How to Open/Show the div on mouse over image?

Posted on 2009-04-07
28
1,358 Views
Last Modified: 2012-05-06
on the mouse over of image, i want to open a div in which i could show anything i want like the its bigger image or any for . how can i do this?
0
Comment
Question by:designersx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 16
  • 7
  • 5
28 Comments
 
LVL 52

Expert Comment

by:Ryan Chong
ID: 24087047
0
 
LVL 3

Expert Comment

by:QualitySoftwareDevelopment
ID: 24087092
Try this
onmouseover="divname.style.visibility='visiblie';
 
onmouseoout="divname.style.visibility='hidden';"

Open in new window

0
 
LVL 3

Expert Comment

by:QualitySoftwareDevelopment
ID: 24087104
sorry that was a little to fast :-) ... spells visible and onmouseout
0
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 

Author Comment

by:designersx
ID: 24087146
could u tell me simple script of

image pop up on mouse over?
0
 

Author Comment

by:designersx
ID: 24087167
dynamic drive is some difficult to understand. so please another way.
0
 
LVL 3

Expert Comment

by:QualitySoftwareDevelopment
ID: 24087297

<img src="you img path" onmouseover="myDiv.style.visibility='visible';" onmouseout="myDiv.style.visibility='hidden';" >
 
<div id="myDiv" name="myDiv" style="visibility: hidden; position: absolute; top: 100px; left: 100px;">
<img src="your large img path">
</div>

Open in new window

0
 

Author Comment

by:designersx
ID: 24087461
This is right but i want that the big image should also move as i move my cursor on the smaller image.

this should not be restricted to the image.If i would need to show a form showing some entries then it would not work.


yogesh
0
 
LVL 3

Expert Comment

by:QualitySoftwareDevelopment
ID: 24090575
Here is a way to find the mousecurser XY and then add as you see fit :-) .. but they need to be triggered by a onmouseevent
function findXCoord(evt) {
	if (evt.x) 	return evt.x; 
	if (evt.pageX) return evt.pageX; 
}
 
function findYCoord(evt) {
	if (evt.y) return evt.y; 
	if (evt.pageY) return evt.pageY; 
}

Open in new window

0
 

Author Comment

by:designersx
ID: 24092985
function findXCoord(evt) {
        if (evt.x)      return evt.x;
        if (evt.pageX) return evt.pageX;
}
 
function findYCoord(evt) {
        if (evt.y) return evt.y;
        if (evt.pageY) return evt.pageY;
}

what we need to pass in the function  on onmouse event, please tell me.

<a href="#" onmouseevent="findXCoord()" ><img name="map_12" src="images/map_12.gif" width="97" height="131" border="0" alt=""></a>

please rectify my above code.
0
 
LVL 3

Expert Comment

by:QualitySoftwareDevelopment
ID: 24094378
This works...
<script language="JavaScript1.2">
 
 
function SetValues()
{
    document.getElementById('myDiv').style.top = window.event.clientY;
    document.getElementById('myDiv').style.left = window.event.clientX;
 
}  
 
</script>
 
 
<img src="you img path" onmouseover="myDiv.style.visibility='visible'; getMouseXY;" onmouseout="myDiv.style.visibility='hidden';" onmousemove="SetValues();">
 
<div id="myDiv" name="myDiv" style="visibility: hidden; position: absolute; top: 100px; left: 100px;">
<img src="your large img path">
</div>

Open in new window

0
 
LVL 3

Expert Comment

by:QualitySoftwareDevelopment
ID: 24094382
and then raise the poins please
0
 

Author Comment

by:designersx
ID: 24095796
i will be informing u as soon as i will be back to work, urgently i need to go out of station.

thanks for ur help.
0
 

Author Comment

by:designersx
ID: 24103887
sir, it works fine but the image was blurring like sometimes it is showing , not showing as i move the cursor.

sir i would check this on different computer and then let u know. but sir if i want that on the mouse over of the image some form should be opened instead of the image, then how should i proceed?
0
 

Author Comment

by:designersx
ID: 24104174
actually the image gets disappeared at some positions. why is this so?
0
 

Author Comment

by:designersx
ID: 24104211
Sir, if i have a record in the database, i want to fetch it from it with ajax, then how should i do it?

i have posted my code of fetching the data from database  with ajax, u only need to modify it a little bit.

http://www.experts-exchange.com/Programming/Languages/Scripting/AJAX/Q_24302119.html


yogesh
0
 

Author Comment

by:designersx
ID: 24104346
i have modified the code, please see it and do the change the req. change in that.

1) image path is shown instead of showing the image, i think there is a problem in the database, so have a look at that.
2) problem is how i handle the mouseover event. 2 tasks are being done on this  1) data is fetched from database. 2) image moves on mouseover event.
[index1.php]
 
<?php
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("ajax_demo", $con);
?>
<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>
 
<form>
<img name="map_06" src="images/map_03.gif" width="202" height="162" border="0" alt="" onMouseOver="showUser(1); " onmousemove="SetValues();">
<img name="map_09" src="images/map_06.gif" width="94" height="74" border="0" alt="" onMouseOver="showUser(2)" onmousemove="SetValues();">
<img name="map_03" src="images/map_09.gif" width="200" height="127" border="0" alt="" onMouseOver="showUser(3)" onmousemove="SetValues();">
 <img name="map_12" src="images/map_10.gif" width="97" height="131" border="0" alt="" onMouseOver="showUser(4)" onmousemove="SetValues();">
</form>
 
<p>
<div id="txtHint"></div>
</p>
 
</body>
</html>
 
[getuser.php]
 
<?php
$q=$_GET["q"];
 
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("images", $con);
 
$sql="SELECT * FROM images WHERE id = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
 {
 echo $row['images'];
 }
?>
 
[selectuser.js]
 
var xmlHttp;
 
function SetValues()
{
  document.getElementById('myDiv').style.top = window.event.clientY;
  document.getElementById('myDiv').style.left = window.event.clientX;
}
 
function showUser(str)
{
document.getElementById('txtHint').style.visibility='visible';
 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="getuser.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 } 
}
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
 
 
[images.sql]
 
create database if not exists `images`;
 
CREATE TABLE `images` (
  `id` int(10) NOT NULL auto_increment,
  `images` varchar(50) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
 
 
insert  into `images`(`id`,`images`) values (1,'images/map_03-over.gif'),(2,'images/map_06-over.gif'),(3,'images/map_09-over.gif'),(4,'images/map_10-over.gif'),(5,'images/map_12-over.gif'),(6,'images/map_15-over.gif');

Open in new window

0
 

Author Comment

by:designersx
ID: 24104360
just see the onmouseover event of index1.php.

how can i mix ur above code with this code so that images are also shown and move also.
0
 

Author Comment

by:designersx
ID: 24104915
all is working the only thing is the image path is shown instead of images. what can be the problem ?
0
 
LVL 52

Accepted Solution

by:
Ryan Chong earned 100 total points
ID: 24104946
in getuser.php, change:

echo $row['images'];

to:

echo "<img src='"+$row['images']+"'>";
0
 
LVL 52

Expert Comment

by:Ryan Chong
ID: 24104954
sorry, it is:


echo "<img src='".$row['images']."'>";
0
 

Author Comment

by:designersx
ID: 24105019
even now  if u will see the images are not shown, i don't know why . it must show definately, please run the code and then let me know. images are being fetched properly.
0
 
LVL 52

Expert Comment

by:Ryan Chong
ID: 24105062
can you tell us what is the value of $row['images'] ?
0
 

Author Comment

by:designersx
ID: 24105124
value of $row['images'] is:-

images/php1193.tmp
images/php1198.tmp
images/php119D.tmp
images/php168C.tmp

please check the datatype of the image and its value below. i applied the insert query to insert the images.
but it is showing the images path.
create database if not exists `images`;
 
DROP TABLE IF EXISTS `images`;
 
CREATE TABLE `images` (
  `id` int(10) NOT NULL auto_increment,
  `images` varchar(255) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=latin1;
 
 
insert  into `images`(`id`,`images`) values (1,'images/php118F.tmp'),(2,'images/php1193.tmp'),(3,'images/php1198.tmp'),(4,'images/php119D.tmp'),(14,'images/php168C.tmp');

Open in new window

0
 
LVL 52

Expert Comment

by:Ryan Chong
ID: 24105200
>>images/php118F.tmp

? I don't think this is a valid file extension... that's maybe why the images are not shown on page index1.php ?


what if you named php118F.tmp back to its original file extension, will the image showed on page now?
0
 

Author Comment

by:designersx
ID: 24105379
sir if i write images.php118F.gif   , it will show that path . if i would write php118F.gif  , it would show that path  .

i think the problem is in getuser.php where we are echoing the line.

or it might be that it is showing the image but below the previous image. and in mozilla , mouse overed image  does not move whereas in IE and google chrome , it moves.

what can be the problem?
0
 

Author Comment

by:designersx
ID: 24105486
hey guys i just got it, image is shown now.


thanks for ur help.
0
 

Author Comment

by:designersx
ID: 24105532
To QualitySoftwareDevelopment:-

the code u have given me to move the image as i move the cursor is right but the image appears and disappears at some position as i move the cursor. please tell me why?
0
 
LVL 3

Expert Comment

by:QualitySoftwareDevelopment
ID: 24113741
First of all try to add a little to Top and Left position so you don't trigger the onmouseover/out functions ... if that doesn't work, then please post the size of the image you're moving
<script language="JavaScript1.2">
 
 
function SetValues()
{
    document.getElementById('myDiv').style.top = 25+window.event.clientY;
    document.getElementById('myDiv').style.left = 25+window.event.clientX;
 
}  
 
</script>
 
 
<img src="you img path" onmouseover="myDiv.style.visibility='visible'; getMouseXY;" onmouseout="myDiv.style.visibility='hidden';" onmousemove="SetValues();">
 
<div id="myDiv" name="myDiv" style="visibility: hidden; position: absolute; top: 100px; left: 100px;">
<img src="your large img path">
</div>

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question