Hyperlinks, Pop-up Windows & Graphics

  • Thread starter Thread starter ladyimmortal
  • Start date Start date
L

ladyimmortal

I have a question!

I've seen websites in the past where you can make sections of a picture
where they had both a mouseover pop-up window (to tell you what the section
will link you to) AND a hyperlink.

SO far I've figured out to turn a section of a picture (the same picture)
into either a hyperlink OR a pop-up window but not both. I need the pop-up
to come up and then allow an option to go to the link or not but so far,
after about 10 hours of trial and error, I haven't figured it out yet.

Anyone have any suggestions on how to do this?
 
ladyimmortal said:
I have a question!

I've seen websites in the past where you can make sections of a picture
where they had both a mouseover pop-up window (to tell you what the
section
will link you to) AND a hyperlink.

SO far I've figured out to turn a section of a picture (the same picture)
into either a hyperlink OR a pop-up window but not both. I need the
pop-up
to come up and then allow an option to go to the link or not but so far,
after about 10 hours of trial and error, I haven't figured it out yet.

Anyone have any suggestions on how to do this?

I would use onmouseover = "window.open(..........)" and open a window
containing the hyperlink. For the "or not" option, one would also need an
option to close the window. I am sure that I can find a page where I do
that, so I'll look for it and post more detail when I have time (or if you
don't get other replies)
 
Trevor Lawrence said:
I would use onmouseover = "window.open(..........)" and open a window
containing the hyperlink. For the "or not" option, one would also need an
option to close the window. I am sure that I can find a page where I do
that, so I'll look for it and post more detail when I have time (or if you
don't get other replies)

Here is the code to open a new window

<html>
<head>
<script type="text/javascript">
function openpage(url) {
window.open(url, '',
'toolbar=no,location=no,directories=no,status=no,menubar=no'
+ ',scrollbars=yes,resizable=yes'
+ ',height=600,width=620,left=200,top=0' )
}
</script>
</head>
<body>
<a href="#" title=""
onmouseover="openpage('newpage.html');return false;">
Your image goes here</a>
<body>
</html>


This is newpage.html (also using window.open)

<html>
<head>
</head>
<body>
<a href="#" title="RATEC"
onclick = window.open('http://ratec.actbus.net')>
Click here to go to link</a><br>
Close window to return
<body>
</html>
 
Trevor Lawrence said:
Here is the code to open a new window

<html>
<head>
<script type="text/javascript">
function openpage(url) {
window.open(url, '',
'toolbar=no,location=no,directories=no,status=no,menubar=no'
+ ',scrollbars=yes,resizable=yes'
+ ',height=600,width=620,left=200,top=0' )
}
</script>
</head>
<body>
<a href="#" title=""
onmouseover="openpage('newpage.html');return false;">
Your image goes here</a>
<body>
</html>


This is newpage.html (also using window.open)

<html>
<head>
</head>
<body>
<a href="#" title="RATEC"
onclick = window.open('http://ratec.actbus.net')>
Click here to go to link</a><br>
Close window to return
<body>
</html>


I didn't add any info on how to use part of a picture, but you may have
solved this
Here is an example from my site

<img src="images/Ed & Jean Carnall Website.jpg" title="Point to face to see
name" alt="" height="363" usemap="#carnallmap">
<map name="carnallmap">
<area shape="rect" coords="0,0,200,290" alt="" title="Eddie Carnall">
<area shape="rect" coords="210,0,438,363" alt="" title="Jean Carnall">
</map>

On the area tag, you can add onmouseover=".........">
(I have tried it and it works)
 
This is what finally worked for me, in case someone else wants to know how to
do this:

<p align="center"> <p align="center"><map name="FPMap0">
<area href="http://www.mywebsite/forum" shape="rect" coords="252, 125, 330,
213 "alt="" title="Click here to go to the the Message Board">>

I didn't end up needing a popup. With this option when my mouse ran over
the area the "Click here to go to the Message Board" option came up and then
I was able to click and it took me right where I wanted it to go :D.

Thanks again.


</map>
 
Back
Top