PDA

Click to See Complete Forum and Search --> : JS Pop-up with image

Acardipane
05-25-2003, 03:11 AM
I got a script from hotscripts.com for a pop up.
The script is below.
The script works fine only when you slide over the url with youre mouse you only get a pop-up which is in plain text.
I don’t want text in the pop-up but I want an image in the pop-up.

Can somebody help me???

<!-- TWO STEPS TO INSTALL HELP POPUPS:



1. Copy the coding into the HEAD of your HTML document

2. Add the last code into the BODY of your HTML document -->



<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->



<HEAD>



<SCRIPT LANGUAGE="JavaScript">



<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->



<!-- Begin



// Need help-popups to work in frames? Read how at:

// http://faq.javascriptsource.com/?help-popups



// Create an entry in this format for each help popup you will have.

// hmsg["popup name"] = new helpmsg(

// "Title of popup", "header style", "Message Style", "Help Message");



// 'popup name' is the what you will call the popup later, used to open help.

// 'title of popup' is shown at the top of the help box that opens. (Optional)

// 'header style' is a predefined style of how to display the title.

// header style valid options include: 'header', 'fancyheader', 'h1', 'h2', or ""

// 'message style' is a predefined style of how to display the help message.

// message style valid options include: 'plain', 'italics', 'bold', ""

// 'help message' is the the text shown in the popup. It should explain the topic.



// I have tried to show a multitude of different popup combinations below....



var hmsg = new Array();



hmsg["home"] = new helpmsg(

"Home Page", "fancyheader", "plain", "Clicking this link will bring you to the JavaScript Source home page.");



hmsg["forum"] = new helpmsg(

"", "", "bold", "Ask a JavaScript question or post a script request and our other JavaScript-savvy visitors will try to help you.");



hmsg["faq"] = new helpmsg(

"JavaScript Source FAQs", "h2", "italics", "Answers to the most common JavaScript questions we receive at The JavaScript Source.");



hmsg["news"] = new helpmsg(

"", "", "", "A monthly newsletter with links to all the script we've added to the site in the last month, a webmaster-related column, and links to other useful webmaster sites.");





var myPopup = new helpbox("myPopup", hmsg, 275, 175, "#ffffee");



// 275 is the width of the popup box

// 175 is the height of the popup box

// "#ffffee" is the color of the popup box





function helpmsg(header, hstyle, mstyle, message) {

this.DEFAULTHSTYLE = "plain";

this.DEFAULTMSTYLE = "plain";



this.header = header;

if (hstyle) this.hstyle = hstyle;

else this.hstyle = this.DEFAULTHSTYLE;

this.message = message;

if (mstyle) this.mstyle = mstyle;

else this.mstyle = this.DEFAULTMSTYLE;

return this;

}

new helpmsg();

helpmsg.prototype.show = show;



function show() {

var H = "<FONT FACE='arial'>" + this.header + "</FONT>";

if (this.hstyle == "h1") H = "<H1>" + H + "</H1>";

else if (this.hstyle == "h2") H = "<H2>" + H + "</H2>";

else if (this.hstyle == "h3") H = "<H3>" + H + "</H3>";

else if (this.hstyle == "h4") H = "<H4>" + H + "</H4>";

if (this.hstyle == "fancyheader") H = "<table width='75%'>" +

"<tr><td bgcolor='#6060ff' align='center' valign='center'>" +

"<H1><FONT COLOR='white'>" + H +

"</FONT></H1>" + "</td></tr></table>";

else if (this.hstyle == "italics")

H = "<I>" + H + "</I>";



var M = "<FONT FACE='arial'>" + this.message + "</FONT>";

if (this.mstyle == "plain") {}

if (this.mstyle == "italics") M = M.italics();

else if (this.mstyle == "bold") M = M.bold();



var htmlpage = "";

if (this.hstyle.indexOf("header")>=0)

htmlpage = H + M;

else htmlpage = H + "<BR>" + M;

return htmlpage;

}



function helpbox(name, hm, width, height, bgcolor) {

this.name = name;

this.helpmessage = hm;

this.timerHandle = null;

this.windowHandle = null;

this.DEFAULTWIDTH = 250;

this.DEFAULTHEIGHT = 150;

this.DEFAULTBGCOLOR = "#ffffcc";

this.POPUPDELAY = 100;

if (width) this.width = width;

else this.width = this.DEFAULTWIDTH;

if (height) this.height = height;

else this.height = this.DEFAULTHEIGHT;

if (bgcolor) this.bgcolor = bgcolor;

else this.bgcolor = this.DEFAULTBGCOLOR;

return this;

}

function startHelp(msgindex) {

var cmdstr="top." + this.name + ".showHelp('" + msgindex + "')";

this.timerHandle = setTimeout(cmdstr, this.POPUPDELAY);

}

function showHelp(msgindex) {

if (!this.windowHandle || !this.windowHandle.name || this.windowHandle.name=="")

this.windowHandle = window.open(

"",

"subWindow",

"toolbar=no," +

"location=no," +

"directories=no," +

"status=no," +

"menubar=no," +

"scrollbars=no," +

"resizable=no," +

"width=" + this.width + "," +

"height=" + this.height

);

else

this.windowHandle.focus();

this.windowHandle.document.open();

var to_page =

"<HTML>\n" +

"<BODY BGCOLOR='" + this.bgcolor + "'><P>" +

this.helpmessage[msgindex].show() +

"</BODY></HTML>\n";

this.windowHandle.document.write(to_page);

this.windowHandle.document.close();

}

function clearHelp() {

clearTimeout(this.timerHandle);

if (this.windowHandle && this.windowHandle.name) {

this.windowHandle.close();

this.windowHandle=null;

}

}

new helpbox();

helpbox.prototype.startHelp = startHelp;

helpbox.prototype.showHelp = showHelp;

helpbox.prototype.clearHelp = clearHelp;

// End -->

</script>

</HEAD>



<!-- STEP TWO: Copy this code into the BODY of your HTML document -->



<BODY>



<a href="http://javascript.internet.com/" onMouseOver="myPopup.startHelp('home')" onMouseOut="myPopup.clearHelp()">JavaScript Source Home Page</a><br>

<br>

<a href="http://forum.javascriptsource.com/" onMouseOver="myPopup.startHelp('forum')" onMouseOut="myPopup.clearHelp()">JavaScript Message Forum</a><br>

<br>

<a href="http://faq.javascriptsource.com/" onMouseOver="myPopup.startHelp('faq')" onMouseOut="myPopup.clearHelp()">JavaScript Source FAQs</a><br>

<br>

<a href="http://e-newsletters.internet.com/javascriptsource.html" onMouseOver="myPopup.startHelp('news')" onMouseOut="myPopup.clearHelp()">JavaScript Source Newsletter</a><br>

<br>



<p><center>

<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>



<!-- Script Size: 5.71 KB -->

:confused: :confused: :confused: :confused:
khalidali63
05-25-2003, 10:35 AM
you need to put the appropriate images src path in here

var to_page =
"<HTML>\n" +
"<BODY BGCOLOR='" + this.bgcolor + "'><P>" +
this.helpmessage[msgindex].show() +
"</BODY></HTML>\n";

replacing the above with this

var to_page =
"<HTML>\n" +
"<BODY BGCOLOR='" + this.bgcolor + "'><P><img src='" +
images[imageIndex].src +"' alt=''/></p></BODY></HTML>\n";

where this part of the code presumes that you 'll create an array of images
and pass it an appropriate array index

images[imageIndex].src
Acardipane
05-26-2003, 12:31 PM
Thnx a lot Khalid only...



where do i place images[imageIndex].src in the script?
i have copied and paste youre changes but then i get a run time error.
khalidali63
05-26-2003, 12:40 PM
What you will need to do is create an array

var images = new Array();

and then preload images and store them in this array

once you do that,then you will have to pass an appropriate array index pointing to the correct image in the array

the code snippet I posted earlier will work once you take care of this array part of it
Acardipane
05-26-2003, 12:57 PM
i am a newbee on the programming and i can read js a litle but i cant write it.

can you give me, if it is not to much troouble, another hint?
khalidali63
05-26-2003, 01:27 PM
Originally posted by Acardipane
i am a newbee on the programming and i can read js a litle but i cant write it.

Fair enough,

Here you go,I have put some code to make it do what you intended to.

http://68.145.35.86/temp/imageInWindow_htmlcardipane.html

Let me know..:D
Acardipane
05-26-2003, 02:24 PM
Allrigth schwa, (you are from maroc right?)

under this i find youre code thnx for it very much.

but what i dont get is how to change the images that i want.
you may be thinking that i am a loser :P
but i thank you again for the help.

Edgar(acardipane)

var imgArr = new Array();
if(document.images){
for(var x=0;x<4;x++){
var onImage = new Image();
onImage.src = "images/button"+(x+1)+"a.gif";
imgArr[x] =onImage;
}
}

function getImage(imageIndex){
var index = 0;
switch(imageIndex){
case 'home':
index = 0;
break;
case 'forum':
index = 1;
break;
case 'faq':
index = 2;
break;
case 'news':
index = 3;
break;
}
return imgArr[index].src;
}
khalidali63
05-26-2003, 02:58 PM
Originally posted by Acardipane
Allrigth schwa, (you are from maroc right?)


:confused: :confused: :confused:

Anyways!

first part of the code preloads images.
You will have to point this part of the code

onImage.src = "images/button"+(x+1)+"a.gif";

to appropriate image resource.

once all images are preloaded,
then I just followed the pattern which existing code has,and get a relative image for a link.

using this part of the code

case 'home':
index = 0;
break;

Since there are four links,you need to preload 4 images,once thats done and they are stored in the
imgArr

thats all you need to do.