new window with a hover button??? 1

Guest_imported · Oct 27, 2001

To the respective Javascript experts,

I am trying to get a hover button to create a pop-up window and I am able to do so. I desperately need assistance!

Here what I have so far for the hover button code (which works fine) - It's creating the window that's impossible. Any advice would be greatly appreciated

<html>
<head>
<script language="javascript">
<!--

if (document.images)
{
pic1on= new Image();
pic1on.src="graphics/infoON.gif";

pic1off= new Image();
pic1off.src="graphics/infoOFF.gif";
}

function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src&quot

;
document

.src= imgOn;
}
}

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src&quot

;
document

.src= imgOff;
}
}

//-->
</SCRIPT>
</HEAD>

<body>
<A HREF="survey.html" target="title" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')"><IMG SRC="../graphics/infoOFF.gif" name="pic1" border="0" width="46" height="44"></A>
</body>
</html>

WhiteKnight7372001 · Oct 27, 2001

You should probably think about creating a custom made submit button ... I'm not quite clear how though...

ToddWW · Oct 27, 2001

Jane,

Try this. The changes I have made are in RED.

<html>
<head>
<script language="javascript">

</SCRIPT>
</HEAD>

<body>
<A HREF="javascript:subWin('survey.html');" target="title" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')"><IMG SRC="../graphics/infoOFF.gif" name="pic1" border="0" width="46" height="44"></A>
</body>
</html>

Now, there are a million ways to do that, the most important is to know the simple window.open() method. Some people like to store the method to a variable like this..

var surveyWin
surveyWin = window.open(blah..blah..)

If you initialize the variable globally then you can have access to that window from other functions to do things like close it, resize it, etc... Also, the window.open() method takes three paramaters, the last two are optional. The first is the URL, the second is any old name that you want to give the window, and the third are the properties such as height, width, etc... If you leave out the 3rd parameter, then all of the properties and elements of the window are visible such as scrollbars, address line, menu bar, etc.. But as soon as you make a specification to just one property (like size which I have done) then all of the other elements are hidden and you would need to turn them on explicitly.

Goto

http://javascript.internet.com/

for more details on the window.open() method and the properties that you can set for the window.

Hope this helps..

ToddWW

Guest_imported · Oct 28, 2001

Thanks Todd, i think this is definitely the direction that I should go.

I tried out the code and it didn't quite work. Sorry for the late reply - I've been tryin to tweek the code to get it to work - but I've been unsuccessful. A new window does appear but I don't think it recognizes the function subWin. Help?

question, the function subWin has the arguement "page_ref" and then the "page_ref" is also listed on the line below.... what does "page_ref" do exactly?

ToddWW · Oct 28, 2001

Hi Jane,

First off, the target="title" is causing that error. Since you're opening a new window, can you get rid of that ?? Once you do, the sub window will open without any problems.

Secondly, the page_ref is simply the mechanism I'm using to pass the parameter from the function call. In the function call, I specify the URL like this.

javascript:subWin('survey.html');"

Then in the actual function I pick up that reference and give it a name. In this case, I named it page_ref, but any old name (that's not reserved by JavaScript) will do. Then anywhere in the function that you want to reference survey.html you just type in the name that you gave the passed parameter. In this case it's page_ref.

Now I did that because then the subWin() function is reusable. All you have to do is call that function somewhere else on the page but supply a different url in the function call. Does that make sense ?? The following code would perform the equivalant method, but isn't reusable on that page because the URL is hard coded into the function. Look here..

function subWin()
{
window.open("survey.html","somename","width=300,height=300&quot
}

//-->
</SCRIPT>
</HEAD>

<body>
<A HREF="javascript:subWin();" target="title" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')"><IMG SRC="../graphics/infoOFF.gif" name="pic1" border="0" width="46" height="44"></A>
</body>
</html>

Do you see the difference. Both will work fine, but the one I provided originally can be re-used. It's important to know that because somewhere down the road you may have a select list with 15 different pages that you want open in a new window. Would be ridiculous to write 15 different functions for new windows.

You can see your onMouseOver and onMouseOut event handlers passing reference to the pic name. Then in the function, the reference is given the name imgName. You see, since that is constructed in that fashion, those functions can be re-used elsewhere on the page by simply changing the references in the onMouseOver and onMouseOut event handlers.

Anyways, I hope this sheds some light on the subject.

Have a great weekend and don't forget to set your clock..

ToddWW

Guest_imported · Oct 28, 2001

Thanks Todd - that did it! You saved my life. And what you said before ... that totally makes sense. Thanks again! You have a good weekend too

tsdragon · Oct 29, 2001

Good work Todd! You're starting to make me feel inferior!

Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

ToddWW · Oct 29, 2001

Thanks Tracy, I may be calling on you're expertise here shortly as I'm beginning to get stuck helping another member..

ToddWW

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

new window with a hover button??? 1

Guest_imported

New member

WhiteKnight7372001

MIS

ToddWW

Programmer

Guest_imported

New member

ToddWW

Programmer

Guest_imported

New member

tsdragon

Programmer

ToddWW

Programmer

Similar threads

Part and Inventory Search

Sponsor