I can't get this hyperlink to show. Any ideas?

J

jmroberts70

2[H]4U
Joined
Oct 15, 2002
Messages
2,953
Example pages:

http://www.bedofnails.tv/contact2.htm

http://www.bedofnails.tv/contact3.htm

I'm trying to get the red letters of the background image of the page to work as a hyperlink "mailto" object. I've tried using a DIV that places a 1x1 px transparent GIF image stretched over either the entire box and then using an imagemap function to locate the area of the page I want to turn into a hyperlink (version 2), or using that same GIF in a much smaller format and located by a DIV to put it right over the red letters (version 3). Either way, I can see the object with Firebug but I can't seem to get it to work in any browser other than IE (for some strange reason). I've tried changing the hyperlink z-index to something above the page but that's not working either. Is there something I'm missing or maybe a better way to do this?

Thanks in advance guys!
 
Last edited:
I believe there's a way using either HTML or JavaScript (been so long since I've done this) that allows you to create either a circle, square, rectangle, or polygon using set coordinates, and set that as a clickable area. I'm not sure what it's called however, and I'm not sure how you go about making it work with different resolutions. Sorry I couldn't have been of more help, I'm just trying to point you in the right direction the best I can.
 
Yeah, version 2 above does an imagemap and that may be what you're thinking of. I stretch an invisible image over the box and then specify by coordinates where the hyperlink is. Still, no workey!
 
I had to do something similar for some client of mine and managed to come up with this:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
	<script type='text/javascript'> 
	function toggleZoneOn(thisZone) {
		clearHighlights();
		document.getElementById(thisZone).className = "zoneDivVis";
	}
	function clearHighlights() {
		document.getElementById("area1").className = "zoneDivHide";
		document.getElementById("area2").className = "zoneDivHide";
		document.getElementById("area3").className = "zoneDivHide";
		document.getElementById("area4").className = "zoneDivHide";
	}
 
	</script> 
	<style type='text/css'> 
		.zoneDivHide {
			background-repeat:no-repeat;
			position:absolute;
			visibility:hidden;
		}
		.zoneDivVis {
			background-repeat:no-repeat;
			position:absolute;
			cursor:pointer;
			visibility:visible;
		}
	</style> 
</head> 
<body style='margin: 0; padding: 0'> 
<div style='padding: 0; margin: 0'> 
	<div id='area1' onClick='window.open("coveragearea.1.png","_blank");' class='zoneDivHide' style='width: 60px; height: 87px; background-image: url(coveragemap.area1.png); left: 217px; top: 30px'></div> 
	<div id='area2' onClick='window.open("coveragearea.2.png","_blank");' class='zoneDivHide' style='width: 137px; height: 135px; background-image: url(coveragemap.area2.png); left: 100px; top: 185px'></div> 
	<div id='area3' onClick='window.open("coveragearea.3.png","_blank");' class='zoneDivHide' style='width: 84px; height: 57px; background-image: url(coveragemap.area3.png); left: 246px; top: 463px'></div> 
	<div id='area4' onClick='window.open("coveragearea.4.png","_blank");' class='zoneDivHide' style='width: 224px; height: 229px; background-image: url(coveragemap.area4.png); left: 186px; top: 235px'></div> 
	<img src='coveragemap.png' style='border: 0; padding: 0; margin: 0' usemap='#imagemap'>
<div> 
<map name='imagemap'> 
	<area shape='poly' onMouseOver='toggleZoneOn("area1");' coords='252,34,267,43,273,67,272,70,260,78,265,86,265,95,260,102,256,103,255,109,237,113,227,107,223,96,223,87,229,81,233,80,232,77,226,75,220,70,220,64,224,55,224,47,230,44,252,34'> 
	<area shape='poly' onMouseOver='toggleZoneOn("area2");' coords='192,187,217,217,233,262,229,273,220,278,201,283,185,276,165,288,152,315,137,315,104,302,103,278,121,257,119,220,149,192,192,187'> 
	<area shape='poly' onMouseOver='toggleZoneOn("area3");' coords='268,463,308,463,325,479,328,492,327,503,298,517,290,517,261,512,249,501,251,477,255,468,268,463'> 
	<area shape='poly' onMouseOver='toggleZoneOn("area4");' coords='268,462,308,462,319,453,333,417,405,395,408,348,402,322,378,299,379,291,392,276,395,256,389,245,258,236,261,247,250,251,229,273,214,281,203,299,201,344,189,356,190,382,200,394,206,395,231,388,237,396,249,401,262,403,261,443,268,462'> 
	<area shape='rect' onMouseOver='clearHighlights();' coords='0,0,531,531'> 
</map> 
</body> 
</html>

Result: http://www.partnershipbroadband.com/cms/wp-content/themes/partnership/images/coveragemap.html

Seems to work well for me and if you modify the code slightly (or more than slightly ;)), it should be exactly what you're looking for.
 
[H]exx;1036069982 said:
http://www.bedofnails.tv/contact3.htm should work but there is something in your JS that is making links in that div not work. I am using Chrome and I turned off JS for the page and was able to click on the link just fine.

If I turn JS on it does not work. I then created a link within the content div but outside of the div you currently have that mailto link in and that link worked fine.
Click to expand...

That did it! Thanks so much [H]exx!!! I moved the hyperlink outside of the DIV being affected by the CurvyCorners javascript and got it working (after some updated positioning). Thanks again everyone for all your help!
 
You must log in or register to reply here.
Back
Top