onmouseover display a box that show text + URL

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 138364 Views - Last Post: 27 March 2011 - 01:30 AM

#1 yct  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 01-March 08

onmouseover display a box that show text + URL

Posted 01 March 2008 - 08:20 AM

i want to be able to display text + URL when i move to a link.
When i select close window then the screen go away.
No pop up window. i just want a box next to the link to be able to do this.
Many thanks...
Is This A Good Question/Topic? 0
  • +

Replies To: onmouseover display a box that show text + URL

#2 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: onmouseover display a box that show text + URL

Posted 01 March 2008 - 01:30 PM

Hello
is it something like this:
<html>
<head>
<title>link box</title>
<style>
#messageBox{
	border-right: 1px solid #000000;
	position: absolute;
	width: 217px;
	height: 100px;
	z-index: 1;
	background-color: #C0C0C0;
	border-style: solid;
	border-width: 1px;
	display:none;
}
#closeButt{
	 width: 100%;
	 height: 10px;
	 z-index: 1;
	 cursor: pointer;
	 left: 0px;
	 top: 0px;
	 background-color: #808080; 
}
#contents{
	width: 100%;
	height: auto;
	z-index: 2;
}
</style>
<script language="javascript">
function show(obj,msg){
messageBox.style.top=obj.offsetTop
messageBox.style.left=obj.offsetLeft+obj.offsetWidth+5
contents.innerHTML=msg+"<p>"+obj.href
messageBox.style.display="block"
}
</script>
</head>

<body>

<p><a onmouseover="show(this,'this is my message#1')" href="http://www.google.com">link1: go to google</a></p>
<p><a onmouseover="show(this,'this is my message#2')" href="http://www.msn.com">link2: go to msn</a></p>
<p><a onmouseover="show(this,'this is my message#3')" href="http://www.dreamincode.com/">link3: go to DIC</a></p>

<div id="messageBox">
<div onclick="messageBox.style.display='none'" id="closeButt">x Click to close</div>
<div id="contents"></div>
</div>
</body>
</html>



if not please post your code
Regards
Was This Post Helpful? 1
  • +
  • -

#3 yct  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 01-March 08

Re: onmouseover display a box that show text + URL

Posted 01 March 2008 - 10:21 PM

sorry...here is my code...

<script>
function menu (whichMenu,whatState){
if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState;}

else {document[whichMenu].visibility = whatState;}

}
// -->
</script>

<div id="search">
<a href="http://www.google.com/" target="_blank" class="menulink">Google</a>
<a href="http://www.yahoo.com/" target="_blank" class="menulink">Yahoo!</a>
<a href="http://www.about.com/" target="_blank" class="menulink">About.com</a>
<a href="java script://" onmouseover="menu('search','hidden')" class="menulink">CLOSE</a>
</div>


please help thanks.

It's like when you mouse is move to a text, it shows u more details in a box...

This post has been edited by yct: 01 March 2008 - 10:36 PM

Was This Post Helpful? 0
  • +
  • -

#4 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: onmouseover display a box that show text + URL

Posted 02 March 2008 - 08:03 AM

I see
So where do you want to get that details?
is ti a pre defined details (stored in array or database or....?
Was This Post Helpful? 0
  • +
  • -

#5 yct  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 01-March 08

Re: onmouseover display a box that show text + URL

Posted 11 March 2008 - 08:41 PM

Hi, it's a predefined details...Thanks.

This post has been edited by yct: 11 March 2008 - 08:42 PM

Was This Post Helpful? 0
  • +
  • -

#6 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: onmouseover display a box that show text + URL

Posted 12 March 2008 - 05:03 PM

Hi again
I don't know if this is what you want
<html>

<head>
<script>
function menu (whichMenu,whatState){
if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState;}

else {document[whichMenu].visibility = whatState;}

}
function details(what){
myInfo={"google":"the best search engin on the web","yahoo":"this is too","about":"good place to visit"}
detailsBox.innerHTML=myInfo[what]
}
</script>
</head>
<body>
<div id="search">
<a onmouseover="details('google')" href="http://www.google.com/" target="_blank" class="menulink">Google</a>
<a onmouseover="details('yahoo')" href="http://www.yahoo.com/" target="_blank" class="menulink">Yahoo!</a>
<a onmouseover="details('about')" href="http://www.about.com/" target="_blank" class="menulink">About.com</a>
<a href="java script://" onmouseover="menu('search','hidden')" class="menulink">CLOSE</a>
</div>

<div id="detailsBox"></div>
</body>
</html>


Good luck
Was This Post Helpful? 0
  • +
  • -

#7 yct  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 01-March 08

Re: onmouseover display a box that show text + URL

Posted 15 March 2008 - 06:42 AM

This is cool...You are genius :) Thanks...

Can i have one more request, when i click close instead of closing the google, yahoo and etc
can you also make the text disappear as well:P...Thanks...
Was This Post Helpful? 0
  • +
  • -

#8 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: onmouseover display a box that show text + URL

Posted 15 March 2008 - 11:36 AM

Hi again
If you mean that you want to hide the details text?
I prefer to move the detailsBox DIV inside the search DIV,so that way the detailsBox will disappear with the search menu

also you can hide the details text by addig( "close":"" ) to the myInfo array then on (close) mouse over call detail('close')
<a href="java script://" onmouseover="menu('search','hidden');details('close');" class="menulink">CLOSE</a> 


I hope this helps
Was This Post Helpful? 0
  • +
  • -

#9 yct  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 01-March 08

Re: onmouseover display a box that show text + URL

Posted 04 April 2008 - 09:44 PM

View Postahmad_511, on 15 Mar, 2008 - 11:36 AM, said:

Hi again
If you mean that you want to hide the details text?
I prefer to move the detailsBox DIV inside the search DIV,so that way the detailsBox will disappear with the search menu

also you can hide the details text by addig( "close":"" ) to the myInfo array then on (close) mouse over call detail('close')
<a href="java script://" onmouseover="menu('search','hidden');details('close');" class="menulink">CLOSE</a> 


I hope this helps

Was This Post Helpful? 0
  • +
  • -

#10 yct  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 01-March 08

Re: onmouseover display a box that show text + URL

Posted 04 April 2008 - 10:08 PM

Thanks appreciate your help :)

Good day...
Was This Post Helpful? 0
  • +
  • -

#11 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: onmouseover display a box that show text + URL

Posted 04 April 2008 - 11:59 PM

You're welcome

Good day
Was This Post Helpful? 0
  • +
  • -

#12 saleem6655  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 13-April 08

Re: onmouseover display a box that show text + URL

Posted 13 April 2008 - 09:11 PM

the code below submitted is fine however , can someone please help me in getting the code as below
i want to be able to display text + URL when i move to a link/image.
& When onmouseout the text should disappear
Many thanks... in advance

<html>

<head>
<script>
function menu (whichMenu,whatState){
if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState;}

else {document[whichMenu].visibility = whatState;}

}
function details(what){
myInfo={"google":"the best search engin on the web","yahoo":"this is too","about":"good place to visit"}
detailsBox.innerHTML=myInfo[what]
}
</script>
</head>
<body>
<div id="search">
<a onmouseover="details('google')" href="http://www.google.com/" target="_blank" class="menulink">Google</a>
<a onmouseover="details('yahoo')" href="http://www.yahoo.com/" target="_blank" class="menulink">Yahoo!</a>
<a onmouseover="details('about')" href="http://www.about.com/" target="_blank" class="menulink">About.com</a>
<a href="java script://" onmouseover="menu('search','hidden')" class="menulink">CLOSE</a>
</div>

<div id="detailsBox"></div>
</body>
</html>
<br /><html><br /><br /><head><br /><script><br />function menu (whichMenu,whatState){<br />if (document.getElementById)<br />{document.getElementById(whichMenu).style.visibility = whatState;}<br /><br />else {document[whichMenu].visibility = whatState;}<br /><br />}<br />function details(what){<br />myInfo={"google":"the best search engin on the web","yahoo":"this is too","about":"good place to visit"}<br />detailsBox.innerHTML=myInfo[what]<br />}<br /></script><br /></head><br /><body><br /><div id="search"><br /><a onmouseover="details('google')" href="http://www.google.com/" target="_blank" class="menulink">Google</a><br /><a onmouseover="details('yahoo')" href="http://www.yahoo.com/" target="_blank" class="menulink">Yahoo!</a><br /><a onmouseover="details('about')" href="http://www.about.com/" target="_blank" class="menulink">About.com</a><br /><a href="java script://" onmouseover="menu('search','hidden')" class="menulink">CLOSE</a><br /></div><br /><br /><div id="detailsBox"></div><br /></body><br /></html><br />
Was This Post Helpful? 0
  • +
  • -

#13 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: onmouseover display a box that show text + URL

Posted 14 April 2008 - 06:00 AM

Hello
you can do that in differnt ways:
assume that you want to clear the text when you move the mouse out of the div(search),simply add this
<div id="search" onmouseout="detailsBox.innerHTML=''">



or you can add an empty element to the Array(myInfo) and then call the details function to show empty information(which will clear the detailsbox.
myInfo={"clearText":"","google":"the best search engin on the web","yahoo":"this is too","about":"good place to visit"}


<div id="search" onmouseout="details('clearText')">

about displaying text+url, add your url (<a>) to the element's details in the myInfo Array
I hope that's what you're looking for

Regards
Edit: and by the way, next time please make sure to put your code between the code tags
:code:

This post has been edited by ahmad_511: 14 April 2008 - 06:05 AM

Was This Post Helpful? 0
  • +
  • -

#14 saleem6655  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 13-April 08

Re: onmouseover display a box that show text + URL

Posted 15 April 2008 - 04:18 AM

Thanks a lot , also i needed ur help on below, i am trying to pull information from database using php, & when i move mouse over the retrieved (eg Profession) text , i should get a message box for the rest of the details from database have to be shown,
Can u please help me with this , as i am struggling with it
Thanks in Advance
<code>
<?php
$dbh=mysql_connect ("localhost", "", "")
or die ('I cannot connect to the database because: ' . mysql_error());
if (!$dbh) {
echo "there was a problem connecting to the database.";
exit;
}
if ($dbh) {




$result = mysql(links , "select * from all_members where profession='fault'");
$num = mysql_numrows($result);

if ($num==0) {
echo "Sorry no records are found";

}
else {

echo $num;
print " records found ";

?>
<table width="93%" border="1" cellpadding="0" cellspacing="0" align="center">

<td nowrap bgcolor="#333999" width="18%">
<div align="center"><font size="2" face="Arial, Helvetica, sans-serif" color="white"><b>Profession </b></font></div>
</td>

</tr>
<?php
$i = 0;
while($i < $num) {
$f_id = mysql_result($result,$i,"U_ID");
$f_suffix = mysql_result($result,$i,"EMAIL_ID");
$f_fname = mysql_result($result,$i,"fname");
$f_lname = mysql_result($result,$i,"lname");
$f_profession = mysql_result($result,$i,"profession");
$f_phone = mysql_result($result,$i,"phone");

$sl_no=$i+1;
?>



<tr>

<td nowrap align="center">
<div align="center" SIZE="35"><font size="2" face="Arial, Helvetica, sans-serif" color=#333399>onmouseoverdisplay<? echo $f_profession; ?> </font></div>
</td>

<?php
$i++;}
}
exit;
}
mysql_close($dbh);
?>

</table>
</code>
Was This Post Helpful? 0
  • +
  • -

#15 fredie00001  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 14-September 09

Re: onmouseover display a box that show text + URL

Posted 14 September 2009 - 10:42 AM

Hello can you please tell me how i can change the color of the text that shows when mouse is on google, yahoo etc. my website is in black want white text color

This post has been edited by fredie00001: 14 September 2009 - 10:44 AM

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2