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!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Multiple Actions for a Rollover

Status
Not open for further replies.
light742

light742

Technical User
Aug 9, 2010
15
0
0
US
Hello:

I am a newbie to learning Javascript. I have some problems with a file.

The goal of the file is that when it loads in a browser, the 1st image is displayed in the top left (image 7441805.gif),

along with the following three titles to the right of the image, as listed below:

Java Demystified
OOP Demystified
Data Structures Demystified

When you place the mouse over "Java Demystified," the 7441805.gif image should still appear (which it does)), and a new window
should pop-up and stay on the screen displaying "10% Discount for Java Demystified" until the user decides to do away with
the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away
(actually it continuously flashes on and off very quickly), which is not what I want.


When you place the mouse over "OOP Demystified," the 0072253630.jpg image should appear (which it does), and a new window
should pop-up and stay on the screen displaying "20% Discount for OOP Demystified" until the user decides to do away with the new
window by clicking on the "X". The new window does appear for about less than a second , and then goes away
(actually it continuously flashes on and off very quickly), which is not what I want.

When you place the mouse over "Data Structures Demystified," the 7417436.gif image should appear (which it does), and a new window
should pop-up and stay on the screen displaying "15% Discount for Data Structures Demystified" until the user decides to do away with the new
window by clicking on the "X". The new window does appear for about less than a second , and then goes away
(actually it continuously flashes on and off very quickly), which is not what I want.

All of the files are loaded on my laptop, which is using Vista, is 32bit, has the IE9 browser installed, and pop-ups are disabled.
When I try to use Mozilla (version 6.0), I am unable to disable the pop-ups, and therefore can not even get any new windows to open.

I would appreciate your help.

The html file is below:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]


<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">


<head>

<title>Open Window</title>


<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />


<meta http-equiv="Content-Language" content="en-us" />

<meta name="description" content="XYZ" />
<meta name="keywords" content="XYZ" />



<!-- the absolute pathname of this file is:            -->

<!-- C:\MISCSUP2_10_17_8\MISCSUP2\Javascript_Demystified_Download_Working\ -->
<!-- Ch_12_Page241.html -->


<!-- this file was created on Wednesday, 8/24/11:                                  -->
<!-- this file was updated on Wednesday, 8/24/11:                                  -->

<script language="Javascript" type="text/javascript">
      <!--
    	   function OpenNewWindow(book) {
            if (book== 1) 
           {
              document.cover.src='7441805.gif'
              MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="400"')
              MyWindow.document.write('10% Discount for Java Demystified!')
          }
          if (book== 2) 
          {
             document.cover.src='0072253630.jpg'
             MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="500"')
             MyWindow.document.write('20% Discount for OOP Demystified!')            
          }
          if (book== 3) 
          {
             document.cover.src='7417436.gif'
             MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="600"')
             MyWindow.document.write("15% Discount for Data Structures Demystified!")            
         }
        }
      -->
      </script>


</head>

<body>

   <table width="100%" border="0">

      <tbody>

         <tr valign="top">

            <td width="50">
               <a>
                  <img height="92" src="7441805.gif" width="70" border="0" name="cover">
               </a>
            </td>


            <td>
               <img height="1" src="" width="10">
            </td>


            <td>
               <a onmouseover="OpenNewWindow(1)" onmouseout="MyWindow.close()">
                  <b><u>Java Demystified </u></b>  
               </a>

               <br>

               <a onmouseover="OpenNewWindow(2)" onmouseout="MyWindow.close()">
                   <b><u>OOP Demystified</u></b> 
               </a>

               <br>

               <a onmouseover="OpenNewWindow(3)" onmouseout="MyWindow.close()">
                  <b><u>Data Structures Demystified</u></b> 
               </a>

           </td>

        </tr>


       </tbody>


     </table>


</body>


</html>
 
Sort by date Sort by votes
If you are aiming for the windows to close by pressing the x button on it, then why do you need the onmouseout to close it?

What is happening really is, the onmouseout event fires as soon as the window opens it covers the link and so technically makes the mouse move out of your link. The onmouseout event fires closing the window and the mouse is again hovering over the link, so the onmouseover fires displaying the window again. Move your mouse away and you'll see the windows won't return.

The simple fix is to remove the onmouseout events.

To address the problem with Firefox go to the Tools Menu and select Options, click on the Content section ,and then uncheck the "Block popup windows" option.

With that said, I don't see the need of opening a new window, you can simply display a div and add the content you need to it via its innerHTML property. This way, your info will display regardless of the setting of the browser, and you aren't depending on users modifying their browser settings for your scripts to work which is always a very bad idea as you can't actually guarantee that.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Thank you!!!

It worked in IE9 and Mozilla. I had to go through a few more steps for Opera.

For Opera, you need to do 4 sets of things:

1) Click the Alt key, Tools, Advanced, Blocked Content

2) Click the Alt key, Quick Preferences, Open All Pop-Ups

3) Click the Alt key, Tools, Quick Preferences, Edit Site Preferences, Content, and uncheck enable content blocking.

4) Click the Alt key, Tools, Preferences, General, and made sure that Open all pop-ups are selected.

Then my file worked, but I noticed that the new pop-up window gets placed behind the the existing window (when the mouse is placed over a title)

along with its associated tab.

Thanks for your time.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
261
Mike Lewis
Mike Lewis
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
128
Rayj0000
Rayj0000
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
148
malpa
malpa
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
223
xwb
xwb
James Mcgill
  • Locked
  • Question
Schema for a haikus
Replies
0
Views
41
James Mcgill
James Mcgill

Part and Inventory Search

Sponsor

Back
Top