By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,198 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Help with an IMAGE as a link for a popup.

Chrisjc
100+
P: 375
Here is the code for the image

[HTML]
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000">
<p align="center">
<img border="0" src="http://www.afefilters.com/images/prodryslogo.gif" width="167" height="62"></td>
</tr>
[/HTML]

The code that I made for the pop up is as followed...

Expand|Select|Wrap|Line Numbers
  1. <p><span onclick='loadPage("http://afefilters.com/prodrys/")'></span></p>
Now the code that goes in the head to make this work is here.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function loadPage(URL) {
  3.   var hi = screen.availHeight * 0.9;
  4.   var wi = screen.availWidth  * 0.6;
  5.   var str = "height=" + hi + ",width=" + wi;     
  6.   if (window.screen) {
  7.     var ah = screen.availHeight - 40;
  8.     var aw = screen.availWidth - 7;
  9.     var xc = (aw - wi) / 2;
  10.     var yc = (ah - hi) / 2;
  11.     str += ",left=" + xc + ",top=" + yc ;
  12.     str += ",resizable=yes,scrollbars=yes";
  13.   }
  14.   win=window.open(URL, '', str); 
  15. }
  16. </script>
  17. <style>
  18.   span:visited{text-decoration:none; color:#293d6b; }
  19.   span:hover{text-decoration:underline; color:#293d6b; }
  20.   span {margin:0 0 0 10px;color:#293d6b; cursor: hand; width:85px;}
  21. </style>
  22.  
Now the first code is the PICTURE it has NO LINK.. I need to make it open that link in the code I wrote in the 2nd code box... so it will pop up in the 3rd code box size that I have as well... any help please?

I cant seem to get the IMAGE to become a link...
Jan 17 '07 #1
Share this Question
Share on Google+
15 Replies


drhowarddrfine
Expert 5K+
P: 7,435
IE6 doesn't work with :hover on any element but <a>. IE7 will but you must have a proper doctype so IE isn't in quirks mode.
Jan 17 '07 #2

Expert 100+
P: 1,892
What's up with boosting my avatar?
Jan 17 '07 #3

Chrisjc
100+
P: 375
What's up with boosting my avatar?

Boost? I leeted this off my own comp haha
Jan 17 '07 #4

ronverdonk
Expert 2.5K+
P: 4,258
IE6 doesn't work with :hover on any element but <a>. IE7 will but you must have a proper doctype so IE isn't in quirks mode.
Yes it definitely works on a span tag. It should, because I gave him that code! Try it out for yourself.

Ronald :cool:
Jan 17 '07 #5

ronverdonk
Expert 2.5K+
P: 4,258
chrisjc: why should the image behave like a link? It is not defined as a link, just some image in a cell in a table.

Ronald :cool:
Jan 17 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
Yes it definitely works on a span tag. It should, because I gave him that code! Try it out for yourself.

Ronald :cool:
Ronald,
:hover has not worked in IE since IE4. At least it only worked on anchors. It has been fixed in IE7 and MS made a big deal of this on their IEBlog. Even so, it's not perfect. Link
Jan 17 '07 #7

ronverdonk
Expert 2.5K+
P: 4,258
Where was I? Stupid of me, but of course you are right! This hover was not supposed to work with IE6. Sorry for this.

Ronald :cool:
Jan 17 '07 #8

Chrisjc
100+
P: 375
I am on IE7. I am trying to make a picture a link.. because if they hover over it.. I want them to be able to click it and open in a new window... you gave me the Header code... and I want to use that as well
Jan 18 '07 #9

drhowarddrfine
Expert 5K+
P: 7,435
Then just make your picture an anchor:

<a><img src="...."></img></a>
Jan 18 '07 #10

Chrisjc
100+
P: 375
Then just make your picture an anchor:

<a><img src="...."></img></a>

soo this is my code that makes the window open in a popup... now I need it to be a picture... that I have that when they click on it... the code below will OPEN the popup window... soo how does the code you supplyed work?

Expand|Select|Wrap|Line Numbers
  1. <a onclick='loadPage("http://afefilters.com/prodrys/")'></a>

I see it will display an image but... I know how to do that... just need the IMAGE TO BE A LINK ... any ideas?
Jan 18 '07 #11

Chrisjc
100+
P: 375
Then just make your picture an anchor:

<a><img src="...."></img></a>

wouldnt it be??

Expand|Select|Wrap|Line Numbers
  1. <a onclick='loadPage("http://afefilters.com/prodrys/")'><img src="...."></img></a>

????
Jan 18 '07 #12

drhowarddrfine
Expert 5K+
P: 7,435
If you are using javascript, yes. I thought you were just wanting a link for the image.
Jan 18 '07 #13

Chrisjc
100+
P: 375
If you are using javascript, yes. I thought you were just wanting a link for the image.

Yeah I am..

I have an IMAGE on a page.. that I want people to beable to click that IMAGE and it open a LINK that is in a NEW page but I am using a popup script so I can set the size of the new window... but I cant seem to get the picture to be link able.. here is the code I tryed but it does not work at all

Expand|Select|Wrap|Line Numbers
  1. <a href="<span onclick='loadPage("http://afefilters.com/prodrys/")'><img border="0" src="http://www.afefilters.com/images/prodryslogo.gif" width="167" height="62"></a></a></span>">
Jan 19 '07 #14

Expert 100+
P: 1,892
Will this help?
JS
Expand|Select|Wrap|Line Numbers
  1. function OpenWindow(Url) 
  2.             {
  3.                 WindowOpen = window.open(Url, "", "width=675,height=480")
  4.             }
  5.  
HTML
Expand|Select|Wrap|Line Numbers
  1. <a href="javascript:OpenWindow('../images/4.jpg')">
  2.                     <img style="width: 150px" src="../images/4.jpg" />
  3.                     </a>
  4.  
Jan 19 '07 #15

acoder
Expert Mod 15k+
P: 16,027
Yeah I am..

I have an IMAGE on a page.. that I want people to beable to click that IMAGE and it open a LINK that is in a NEW page but I am using a popup script so I can set the size of the new window... but I cant seem to get the picture to be link able.. here is the code I tryed but it does not work at all

Expand|Select|Wrap|Line Numbers
  1. <a href="<span onclick='loadPage("http://afefilters.com/prodrys/")'><img border="0" src="http://www.afefilters.com/images/prodryslogo.gif" width="167" height="62"></a></a></span>">
No, that's not quite right. Try this instead:
Expand|Select|Wrap|Line Numbers
  1. <a href="javascript:void(0)" onclick='loadPage("http://afefilters.com/prodrys/")'><img border="0" src="http://www.afefilters.com/images/prodryslogo.gif" width="167" height="62"></a>
Jan 19 '07 #16

Post your reply

Sign in to post your reply or Sign up for a free account.