Solved

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

Posted on 2009-04-07
28
1,343 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 49

Expert Comment

by:Ryan Chong
Comment Utility
0
 
LVL 3

Expert Comment

by:QualitySoftwareDevelopment
Comment Utility
Try this
onmouseover="divname.style.visibility='visiblie';
 

onmouseoout="divname.style.visibility='hidden';"

Open in new window

0
 
LVL 3

Expert Comment

by:QualitySoftwareDevelopment
Comment Utility
sorry that was a little to fast :-) ... spells visible and onmouseout
0
 

Author Comment

by:designersx
Comment Utility
could u tell me simple script of

image pop up on mouse over?
0
 

Author Comment

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

Expert Comment

by:QualitySoftwareDevelopment
Comment Utility

<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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
and then raise the poins please
0
 

Author Comment

by:designersx
Comment Utility
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
Comment Utility
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
Comment Utility
actually the image gets disappeared at some positions. why is this so?
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:designersx
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
all is working the only thing is the image path is shown instead of images. what can be the problem ?
0
 
LVL 49

Accepted Solution

by:
Ryan Chong earned 100 total points
Comment Utility
in getuser.php, change:

echo $row['images'];

to:

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

Expert Comment

by:Ryan Chong
Comment Utility
sorry, it is:


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

Author Comment

by:designersx
Comment Utility
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 49

Expert Comment

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

Author Comment

by:designersx
Comment Utility
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 49

Expert Comment

by:Ryan Chong
Comment Utility
>>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
Comment Utility
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
Comment Utility
hey guys i just got it, image is shown now.


thanks for ur help.
0
 

Author Comment

by:designersx
Comment Utility
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
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now