Solved

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

Posted on 2009-04-07
28
1,354 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
  • 16
  • 7
  • 5
28 Comments
 
LVL 51

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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 

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 51

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 51

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 51

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 51

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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
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 …
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…

808 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