/    Sign up×
Community /Pin to ProfileBookmark

Passing a variable to the script

I’m making a new web site ([url]http://www.i-backgrounds.com[/url] – not much there yet) where I’m offering free web page backgrounds to people to use in their site design. On one of the index pages I will be listing several pages of textured backgrounds. Each of these pages will feature the same texture in a variety of colors. Rather than having visitors click the link to open the page just to see if the texture on that page is one they’re interested in, I thought it would be nice for them if I had a window pop-up on mouseover displaying a sample texture from that page, and have the window disappear on mouseout or if they click the link.

I’ve managed to hack a script together that opens and closes the window just as I wanted, but so far I have to hard code the texture into the script (in the head section of the page) to make it work. That means I can only use it for one link on the page. What I need is way to code the background texture I want displayed in the pop up window into the onMouseover event in the page link and have the script in the head section pick up that texture to use as the background image of the pop up window — that way I can display a different texture for each link, reflecting the type of texture featured on the page the link leads to.

Here’s the code from the HEAD section:

<script type=”text/JavaScript”>

function open_new_window()
{
new_window = open(“”,”hoverwindow”,”width=300,height=200,left=10,top=10″);

new_window.document.open();

new_window.document.write(“<html><.title>Sample Texture</title>”);
new_window.document.write(“<body background=’background_images/Texture01.jpg’>”);
new_window.document.write(“This is a sample of the texture style on this page. “);
new_window.document.write(“It is available in six different colors.”);
new_window.document.write(“</body></html>”);

new_window.document.close();
}

function close_window()
{
new_window.close();
}

</script>

Here’s how I’m coding the link:

<a href=”textured_backgrounds_1.shtml”
onMouseOver=”open_new_window();”
onMouseOut=”close_window()”>Textured Background Images Page 1</a>

The script works beautifully like this. I tried changing this line:

new_window.document.write(“<body background=’background_images/Texture01.jpg’>”);

…to this:

new_window.document.write(“<body background=’+image+’>”);

…and tried all sorts of ways to pass the background image I wanted to use from the link into that +image+ part, but after hours and hours of frustration I thought I’d beg for help!

Maybe I’m not even going about it in the right way, I know just enough about JavaScript to frustrate myself. What I’ve basically done so far is to take pieces of different JavaScript code examples and piece them together to get this far. What I can’t find is how to pass the variable I need from the onMouseover event to the script in the HEAD section. Point being, if anyone has a solution, please be specific as to exactly what I need to do and you’ll be my hero for the month!

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@balloonbuffoonJan 05.2006 — You need to pass it into the open window function by putting it in the parentheses.

Like so:
[CODE]function open_new_window([COLOR=Red]image[/COLOR]) [/CODE]
and then by each link:
[CODE]<a href="textured_backgrounds_1.shtml"
onMouseOver=[COLOR=Red]'[/COLOR]open_new_window([COLOR=Red]"background_images/Texture01.jpg"[/COLOR]);[COLOR=Red]'[/COLOR]
onMouseOut="close_window()">Textured Background Images Page 1</a>[/CODE]

Just change the image location by each link to match it. (Notice I also changed the double quotes to single quotes for the onMouseOver value.)

That should work!

Good Luck!

--Steve
Copy linkTweet thisAlerts:
@DennisGauthorJan 05.2006 — Hi Steve,

Thanks for trying to help. I changed the two things you suggested, but what do I change this line to:

new_window.document.write("<body background='background_images/Texture01.jpg'>");

...in order for it to read the mouseover code? I tried:

new_window.document.write("<body background='+image+'>");

...but that didn't work.

Thanks in advance.

Best to you, Dennis
Copy linkTweet thisAlerts:
@DennisGauthorJan 05.2006 — After getting about 2 hours sleep I had the thought that maybe your code was meant to place the image on the popup as an image rather than as the page background, so I removed the line calling for the image to be written as the background, but that didn't work either.

Anyone?

Much appreciated.
Copy linkTweet thisAlerts:
@Tweak4Jan 06.2006 — I haven't had time to look at this whole thing, but the first thing that lept out at me was this:
<i>
</i>new_window.document.write("&lt;body background='+image+'&gt;");


You'll need to fix your quotes for this to ever work. Something along the lines of:
<i>
</i>new_window.document.write("&lt;body background='"+image+"'&gt;");

This way, the document.write is concatinating 3 complete strings:

- "<body background='" (which includes your opening single quote for the image parm)

- the value of "image" and

- "'>" (which contains your closing single quote)
×

Success!

Help @DennisG spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...