iWeb FAQ - Pop-up windows for music, images and more...

iWebFAQ.org

 

What can popup windows be used for? How can I create a page to display in the popup window? How can I add Popup windows in iWeb?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 


Chapter 1: What can popup windows be used for? Some examples...

Chapter 2: How to build a page to display inside the popup

Chapter 3: How to have image popups

Chapter 4: Codes

4.1 Popup from text

4.2 Popup from an image

4.3 Popup from a rollover image




Chapter 1: What can popup windows be used for? Some examples...


Examples playing music:




Example displaying photos:










Example displaying videos:


Click here


Example displaying text:


Click here



Chapter 2: How to build a page to display inside the popup


1. In iWeb add a new page which will later open as a popup. Note that on this page you can put whatever you want: photos, videos, text, slideshows, ...

2. In the inspector under page uncheck the "Include page in navigation menu" and the "Display navigation menu" boxes

3. In the Inspector=>Page=>Layout=>reduce Content width and Content height if used for music enter them to fit your player.


Replace page.html in the codes with this URL.


Chapter 3: How to have image popups


You may also want to have a look at Highslide.


The first step consists in uploading the image to your server as follows...


1. Create a new folder in the folder you publish your website to from iWeb

2. Name this new folder something like 'files' or ‘media’ or whatever

3. Copy your .jpg or any other image file to that folder

4. Upload the folder to your server using your FTP application

5. http://yourdomain.com/nameofthefolder/nameofthefile.extension is the address at which the file will be stored on the web

Example: http://yourdomain.com/media/nameofthefile.jpg


It is recommended to upload two versions of the picture: a smaller version and one of the size you want it top display in the popup. The smaller version will be used on the page since it loads faster, the other one will be used in the popup. Of course you can also upload only one file and use it for both if you want.


Take code 4.2, 4.3, 5.2 or 5.3 and use the path to the image as the URL to open in the popup.



Chapter 4: Codes


To open the pop up you can have people clicking on a text-link, on an image-link or on a rollover image-link.


General instructions:


Replace page.html with the URL to the page you want to display in the popup window or to the URL of the image you want to display inside the popup window

Edit width=300, height=200 to the size you want the popup window to be and to fit the content of the popup window


Once you edited the code copy and paste it in an HTML Snippet or add it with Alternative HTML


4.1 Popup from text


<div style="width:50px; height:20px; font-family: Trebuchet MS; font-size: 12px; color:#000000;">

<style type="text/css">

a:link {

color: #0000FF;

text-decoration: underline;

}

a:hover {

color: #0000FF;

text-decoration: none;

}

a:visited {

color: #0000FF;

text-decoration: underline;

}

</style>

<A HREF="#" onClick="window.open('page.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=200');return(false)">TextToDisplay</A>

</div>


In addition to the general instructions change TextToDisplay to the text you want to display as a link to open the pop up window.


4.2 Popup from an image


<A HREF="#" onClick="window.open('page.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=200');return(false)"><img src="URLofTheImage" style="width:281px; height:100px; border:0px solid #cc3300;"></A>


In addition to the general instructions change URLofTheImage to the URL of the image you want to display as a link to open the pop up window and edit the width and height of the image.


4.3 Popup from a rollover image


<A HREF="#" onClick="window.open('page.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=200');return(false)" onmouseover="document.sub_but.src='http://yourdomain.com/onroll.jpg'" onmouseout="document.sub_but.src='http://yourdomain.com/normal.jpg'"><img src='http://yourdomain.com/normal.jpg' style="width:281px; height:100px; border:0px solid #cc3300;" alt="Move your mouse over me" name="sub_but"></A>


In addition to the general instructions read the Rollover images and buttons FAQ



Note: With all the previously described methods people will have to click to open the player and music start playing. There's a code that actually opens the popup window automatically when someone is visiting a page. The problem is: Most browsers will block it due to security reasons. Most people have “Block auto-popup windows” enabled in their browsers. The window will not popup for them. They just get notified that the browser blocked a popup and can then chose to allow it. And if you put the code to every single page I guess a window will pop up on every single page a user looks at. Bottom line: it’s not recommended to use it, thus I will not provide it here.




This FAQ is also discussed in my iWebFAQ.org E-Book (sample)


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark