Hover then Load a Page Script

[Krus1972]

If you hover over the five stars that are located directly under the words "by Apple" at the following page, you will see a small page that shows review ratings:

http://www.amazon.com/Apple-Space-G...1?ie=UTF8&qid=1393467515&sr=8-1&keywords=ipod

I would like to do the same thing. I have a particular link on my webpage. When the visitor hovers over a link I would like to open another webpage (a mini window) next to the pointer so that it appears to be like the example above. I would like to define what size the mini window is and what html page is loaded within the javascript. When the visitor moves the pointer away from the link, the webpage disappears. Is this something that is possible using javascript?

I would appreciate any help on this as my JavaScript abilities are very limited.

 

[ChrisHirst]

http://www.w3schools.com/jsref/met_win_open.asp

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

Yes its possible with JS. Its also possible with CSS alone. In fact its not all that difficult with css.
At its most basic its a hidden div you show on hover.

Here's an example:

<style type="text/css">

div.detailslink
{
	border:1px solid #dedede;
	border-radius:8px 8px;
	position:relative;
	top:80px;
	left:200px;
	background-color:#f0f0f0;
	width:200px;
	text-align: center;
}

div.detailslink a:link
{
	color:#464646;
	text-decoration:none;
}

div.detailslink a:hover
{
	color:#fefefe;
}

div.detailslink div.hoverpanel
{
	position:absolute;
	right:-300px;
	top:2px;
	width:300px;
	height:200px;
	background-color:#f2f2f2;
	box-shadow:2px 2px 2px 1px #686868;
	display:none;
	

}

div.detailslink div.hoverpanel h2
{
	color:#464646;
	
}


div.detailslink div.hoverpanel p
{
	color:#464646;
}

div.detailslink:hover
{
	background-color: #0055dd;
	color:#fefefe;
}

div.detailslink:hover div.hoverpanel
{
	display:block;
}


</style>

<div class="detailslink">
<a href="#" class="hoverlink">Hover Here</a>
<div class="hoverpanel">
	<h2>This is a hover panel</h2>
	<p>Lorem ipsum text and things go here</p>
</div>
</div>

You can add an iframe or embedded object to show your webpage inside the div. For animations and other eye candy you would need jquery or other scripts.

Try it out. You can change the dimensions of the DIV, color, border, shadow etc... Position, and display should remain as they are.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Krus1972]

vacunita,

Thanks for the post. That works good.

Right now, the hover panel opens and remains in the same place in the left to right direction and up and down direction when the pointer moves around the hovered link. Is there a way to make the hover panel open just to the right of the pointer and have it follow the pointer (finger) as it moves around the hovered link?

Thanks so much...

 

[Krus1972]

One other thing. Is there a way to make the hover panel so that it is not transparent? If it opens where there is currently other text or images on the webpage, I would like it to overlay them this text doesn't show through the panel. Only the contents of the panel will display and not the existing text or images under it..

Thanks again for your help.

 

[vacunita]

Top get it to move with the pointer it needs a bit of JS. Capture the pointer position, and then use that to change the top and left coordinates of the panel. The JS will vary slightly depending on which browsers you want this to work with.

As to the transparency as long as the panel has a defined background color it should not be transparent.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech