HELP! With Javascripts Pop-Up Window

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 375,174 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,225 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 5638 | Replies: 2

•

Join Date: May 2005

Posts: 20

Reputation: jeepj27 is an unknown quantity at this point

Rep Power: 4

Solved Threads: 0

jeepj27

Offline

Newbie Poster

HELP! With Javascripts Pop-Up Window

Jan 29th, 2006

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:

Help with Code Tags

(Toggle Plain Text)

<!-- 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 -->

<!-- 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 -->

Last edited by tgreer : Jan 31st, 2006 at 9:55 am. Reason: Added code tags.

•

Join Date: Dec 2004

Posts: 1,589

Reputation: tgreer is an unknown quantity at this point

Rep Power: 7

Solved Threads: 34

tgreer

Offline

Made Her Cry

Re: HELP! With Javascripts Pop-Up Window

Jan 31st, 2006

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

•

Join Date: Jan 2006

Location: Its the internet... i am everywhere lol

Posts: 274

Reputation: f1 fan is an unknown quantity at this point

Rep Power: 3

Solved Threads: 10

f1 fan

Offline

Posting Whiz in Training

Re: HELP! With Javascripts Pop-Up Window

Jan 31st, 2006

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