Hi All -

I am currently using a Javascript for a pop up window that enlarges a thumbnail picture.

I wish the POP UP window image to be LINKABLE - that is on mouseover of IT, goto a new window URL -

Any help would be extremely appreciated!!!

My Current URL for this project is: www.webdesign.johnrandazzo.net/portfolio.htm (then mouseover one of the designs to pop up the window in question)


CURRENT JAVASCRIPT CODE:

<!-- Begin POP-UP SIZES AND OPTIONS CODE
var close_button 	= "yes"		// GALLERY CLOSE BUTTON ON/OFF
var slideshow_button 	= "yes"		// SLIDESHOW BUTTON yes/no
var viewer		 = "no"		// yes/FULL SCREEN OR no/POPUP MODE



var view_width 		= 675		// GALLERY POPUP WIDTH
var view_height 	= 450		// GALLERY POPUP HEIGHT
var slideshow_width 	= 675		// SLIDESHOW POPUP WINDOW WIDTH
var slideshow_height 	= 450		// SLIDESHOW POPUP WINDOW HEIGHT



var border_color	= "000000"	// PICTURE OUTLINE COLOR
var scrollbarS 		= "no"		// TURN ON POPUP SCROLLBARS
var right_click_on	= "yes"		// RIGHT CLICK PROTECTION ON
var right_click_text	= "Copyright, 2006 John M. Randazzo"	// TEXT FOR THE RIGHT CLICK PROTECTION








// START POPUP CODE




function popUp(URL) {
   if (viewer == "no") {
var look='toolbar=0,scrollbars='+scrollbarS+',location=0,statusbar=0,menubar=0,resizable=1,width='+view_width+',height='+view_height+','
popwin=window.open("","",look)
}
else 
if (viewer == "yes") {
popwin=window.open("","")
}
popwin.document.open()
popwin.document.write('<html><head><title>Site Close-Up</title>')
popwin.document.write('<link rel=StyleSheet href="coolstyle.css" type="text/css" media="screen">')
   if (right_click_on == "yes") {
popwin.document.write('<META HTTP-EQUIV="imagetoolbar" CONTENT="no">')
popwin.document.write('<script language="JavaScript">')
popwin.document.write('function noRightClick() {')
popwin.document.write('if (event.button==2) {')
popwin.document.write('alert(\''+right_click_text+'\')')
popwin.document.write('}')
popwin.document.write('}')
popwin.document.write('document.onmousedown=noRightClick')
popwin.document.write('</script>')
}
popwin.document.write('</head>')
popwin.document.write('<body bgcolor="#000000" background="picts/slideshow-background.jpg" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">')
popwin.document.write('<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" ><tr><td align="center">')
popwin.document.write('<br>')
popwin.document.write('<TABLE cellpadding="0" cellspacing="0" border="1" bordercolor="'+border_color+'" style="border-collapse: collapse"><tr><td>')
popwin.document.write('<img src="'+URL+'">')
popwin.document.write('</td></tr></table>')
popwin.document.write('<br>')
popwin.document.write('<TABLE cellpadding="0" cellspacing="0" border="0"><tr><td>')
   if (close_button == "yes") {
popwin.document.write('<form style="margin: 0px"><input type="button" value="Close" onmouseover="this.className=\'buttonon-popups\'" onmouseout="this.className=\'button-popups\'" class="button-popups" onClick=\'self.close()\'>&nbsp;</form>')
}
   if (slideshow_button == "yes") {
popwin.document.write('</td><td>')
popwin.document.write('<form action="slideshow.htm" style="margin: 0px"><input type="submit" value="Slideshow" onmouseover="this.className=\'buttonon-popups\'" onmouseout="this.className=\'button-popups\'" class="button-popups"></form>')
}
popwin.document.write('</td></tr></table>')
popwin.document.write('<br>')
popwin.document.write('</td></tr></table>')
popwin.document.write('</body>')
popwin.document.close()
}


// SLIDESHOW CODE


function popUpSlideshow(URL) {

day = new Date();
id = day.getTime();
   if (viewer == "no") {
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars='+scrollbarS+',location=0,statusbar=0,menubar=0,resizable=1,width='+slideshow_width+',height='+slideshow_height+'');");
}
else 
if (viewer == "yes") {
eval("page" + id + " = window.open(URL);");
}
}





// MOUSEOVER STATUS



document.write('<div Class="divstyle" id="info" style=\'display:none;\'>')
document.write('<div id="imagetitle" class="pstyletitle" align="center"></div>')
document.write('</div>')



<!-- Begin SMALL MESSAGES


var IE = document.all?true:false

if (!IE) document.captureEvents(Event.MOUSEMOVE)

document.onmousemove = getMouseXY;

var tempX = 0
var tempY = 0

  
function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
obj_info = document.getElementById("info")
obj_info.style.top = tempY + 10;
obj_info.style.left = tempX + 10;
  return true
}

function alert_msg(titletext){
obj_info = document.getElementById("info")
obj_info.style.display = '';
obj_imagetitle = document.getElementById("imagetitle");
obj_imagetitle.innerHTML = titletext;

}

function away()
{
obj_info = document.getElementById("info")
obj_info.style.display = 'none';
}


function goToURL() { history.go(-1); }


//  End -->

I haven't read all of your code. I'd suggest simply wrapping the image in a standard hyperlink.

Either wrap the image in an anchor as Thomas said which will work for a click, or if you want it on mouse over as you say in your post you need to add a bit of javascript on mouseover for the image to open the new link. Personally i dont open links until they are clicked, as it would annoy the users to have thousands of windows open everytime they hovered over something

This article has been dead for over six months. Start a new discussion instead.