Header-HTML+CSS_3.jpg

Code Examples:

Week 4
. Download example file .
Week 5
. Download example file .
Week 6
. Download example file .


How to create an image map and add a rollover effect to it

Image maps are very useful if you are trying to create clickable areas within an image.

Start by inserting this code into the <body> tag of your page.
    <map name="InsertMapNameHere">
        <area shape="circle" coords="65.5,65.5,58" href="../PageName.html"
         onmouseover="ImageNameHere.src='/Images/ImageNameHere.2.jpg'"
         onmouseout="ImageNameHere.src='/Images/ImageNameHere.jpg'">
    </map>
In this example, we are creating a circular image map. But you can also create rectangle and polygon ones. In order to do that, you would insert RECT or POLYGON in shape="". That is where you define what kind of shape it will be. (These are also know as "hot spots")
Now, for the coordinates, for a circle, you use the x,y coordinates of the circle and then the circle radius. (x, y, radius). For a rectangle, you use the x,y coordinates of the top right corner and bottom left corner (x,y,x,y). For a polygon, you need to use all of the x,y coordinates of each corner of the shape in order. Another thing to keep in mind, these coordinates are the coordinates of the shape within the image itself, not in relation to the page. So you may have to place the image in Illustrator to figure out the exact coordinates.

Now for the rollover portion. We are going to use Javascript for this.
The onmouseover line defines what happens when the mouse is placed over the hotspot and onmouseout states what happens when you take the mouse off of the hotspot. You need to make sure you have both your original image and the rollover image saved in the same location. Name the rollover image the same as your first image but add ".2" to the end of it. So when you are personalizing this code, change "ImageNameHere" to whatever the image name you have associated with your rollover images (the original and rollover).

Finally, in your <IMG> tag, make sure you add the attributes name="ImageName" and usemap="#Mapname" . "Image Name" will be the same as the name you gave to your rollover image. "Map name" is the name you assigned to your image map.

For more help, see http://www.javascriptkit.com/howto/imagemap.shtml.

How to add a Favicon to your webpages

A favicon is a little logo or an icon for your website that you can make and that will be displayed next to the address of your site when people are viewing it. Like the little pot and plant icon that this wiki space has.

First, you need to start by making the icon. The image must be either 16x16 pixels or 32x32 pixels and you must save it as either a GIF or a PNG with 8 or 24 bit colours.

Next, enter the following code in the <head> section of your page:

<link rel="icon" type="image/png" href="Images/ImageName.png" />
If you are using a gif, then replace type="image/png" with type="image/gif".
Remember to paste the code on every page that you want the icon to be associated with.

Fading Images
If you want an image on your page to have a fading style. this code should help. its a very unique and "cool" kind of effect.
Copy this code into HTML:
 <div id=" ">
<img src=" " width="" height="" border="0"
style="filter:alpha(opacity=100); -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0;"
onMouseOver="zxcBAnimator('opacity#',this,100,1,1000,[100,1]);"
onMouseOut="zxcBAnimator('opacity#',this,100,1,1000,[100,1]);"/>
</div>
 
<script type="text/javascript">
 
function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj||(!srt&&!fin)||(srt==fin)) return;
 var oop=obj[mde.replace(/\W/g,'')+'oop'];
 if (oop){
  clearTimeout(oop.to);
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
  else oop.update([srt,fin],ms,scale,curve);
 }
 else obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
}
 
function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/\W/g,'');
 this.update([srt,fin],ms,scale,curve);
}
 
zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
 this.time=ms||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.ms=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*this.ms);
 this.srttime=new Date().getTime();
 this.cng();
}
 
zxcBAnimatorOOP.prototype.cng=function(){
 var ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.ms*ms+this.data[1];
 if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
 if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
 else  zxcOpacity(this.obj,this.data[0]);
 if (ms<this.ms) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}
 
function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
 
/*]]>*/
</script>
 
 

Embedding Processing work

In order to embed your interactive Processing work, you need to open the file called "index.html" in the folder where your exported work is, or you can open your work from your student index page, and click on VIEW->PAGE SOURCE

This is what you need to copy:
    <!--[if !IE]> -->
                <object classid="java:sketch_mar19g.class"
                        type="application/x-java-applet"
                        archive="sketch_mar19g.jar"
                        width="250" height="250"
                        standby="Loading Processing software..." >
 
                    <param name="archive" value="sketch_mar19g.jar" />
 
                    <param name="mayscript" value="true" />
                    <param name="scriptable" value="true" />
 
                    <param name="image" value="loading.gif" />
                    <param name="boxmessage" value="Loading Processing software..." />
                    <param name="boxbgcolor" value="#FFFFFF" />
 
                    <param name="test_string" value="outer" />
            <!--<![endif]-->
 
                <object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
                        codebase="http://java.sun.com/update/1.5.0/jinstall-1_5_0_15-windows-i586.cab"
                        width="250" height="250"
                        standby="Loading Processing software..."  >
 
                    <param name="code" value="sketch_mar19g" />
                    <param name="archive" value="sketch_mar19g.jar" />
 
                    <param name="mayscript" value="true" />
                    <param name="scriptable" value="true" />
 
                    <param name="image" value="loading.gif" />
                    <param name="boxmessage" value="Loading Processing software..." />
                    <param name="boxbgcolor" value="#FFFFFF" />
 
                    <param name="test_string" value="inner" />
 
                    <p>
                        <strong>
                            This browser does not have a Java Plug-in.
                            <br />
                            <a href="http://java.sun.com/products/plugin/downloads/index.html" title="Download Java Plug-in">
                                Get the latest Java Plug-in here.
                            </a>
                        </strong>
                    </p>
 
                </object>
 
            <!--[if !IE]> -->
                </object>
            <!--<![endif]-->
Paste this code into a div in your html file and copy the .jar file from your processing 'applet' export folder to the same place as your html page. The .jar file is your processing sketch. *may not work the first few tries* - keep playing with it - try opening it in Safari, or in the preview of CSSedit


Linking UP to a folder

If you need to go up and out a folder, and then back down into another one
<a href="..//folder/file.html">
</a>
The [../] means go up a folder/directory. No matter how deep into your site you are, you can always come all the way back with a couple of ../../’s. Just count the directories until you’re at the right level.


Linking to a New Browser Window

To create a link that opens up in a new browser:
<a href="www.cbc.ca" target="_blank"></a>
The [target="_blank"] creates a new browser window for the website to open.

Linking to a Popup Window

To launch a page in a new window without navigation buttons etc., add the following onclick attribute to the <a> tag in question. For more details see the w3schools page.
<a href="mypage.html" onclick="window.open(this.href,'windowname','width=400,height=300,scrollbars=1').focus();return false;">Popup</a>
  • Modify width and height values as needed.
  • Change windowname to be a unique name for the window you want to launch. Or, use the same name if you want links to open in the same window.
  • Remove ,scrollbars=1 if you don't want scrollbars.

Linking to a section of your page (anchor)

To link to a specific part of your page so that the browser automatically scrolls to it when clicked, first assign an id to the content you want to scroll to if you haven't already done so:
<div id="mycontent">
   content you want to jump to goes here
</div>
Then, create a link like so, using the id from the previous step and adding the hash mark in front:
<a href="#mycontent">Jump to my content</a>
That's it!

Image Rollover

Open your CSS file and start by positioning an id like normal:
#rolloverimage {
    position: absolute;
    top: 100px;
    left: 100px;
}
#rolloverimage will technically be a box with a background in it, so to make it show up on the page you'll need to add a few more things to the CSS. So find the image you'd like to use, make sure it's in the proper location, and figure out its width and height. Then put in the new values to make it look like this:
#rolloverimage {
    position: absolute;
    top: 100px;
    left: 100px;
    background-image: url(images/image1.jpg);
    width: 200px;
    height: 200px;
}
Now you need to make this work as a link, so you will need to add the "a" property to the #rolloverimage id selector. It will look like this:
(note the "a" is added at the top, right after #rolloverimage)
#rolloverimage a {
    position: absolute;
    top: 100px;
    left: 100px;
    background-image: url(images/image1.jpg);
    width: 200px;
    height: 200px;
}
 
You have now defined what the link/image looks like in its normal state, before the mouse touches it. So now you need to define what it looks like while the mouse is hovering over it. To do this, copy the code you have so far (the stuff above) and paste it below, so you'll have the whole #rolloverimage section twice. To make the hover state you'll need to edit the second copy. First, change the "a" you put in earlier to "a:hover" so it knows it's on hover, then change the image address to image you'd like it to change to. It should now look something like this:
#rolloverimage a {
    position: absolute;
    top: 100px;
    left: 100px;
    background-image: url(images/image1.jpg);
    width: 200px;
    height: 200px;
}
#rolloverimage a:hover {
    position: absolute;
    top: 100px;
    left: 100px;
    background-image: url(images/image2.jpg);
    width: 200px;
    height: 200px;
}
That's the end of the CSS part, phew!

Switch to your HTML page, insert the code for the div box, and put the link inside of it, so it looks like this:
<div id="rolloverimage"><a href="addresshere"></a></div>
And that should do it!




Inline frames (Iframes)


With iframes, you can put a page inside a page.

This is a handy function, especially for project 3. For example, if you've created a menu and you want to load each link in a box below, without refreshing the original page, this will be a good solution. Here's what it could look like:

MENU

York
Google

If this sounds like it will work for you, read on!

First, open your main HTML file, the one with the links that will contain the iframe. Paste this code where you want the iframe to appear:
<iframe src="http://www.google.ca" width="400" height="300" frameborder="0" name="putanameinhere"></iframe>
This, like an <img> tag, uses src to link to a file (page, in this case), so replace Google with whatever page you want to show up in there initially, when the page is first visited. So it could be a plain white page if you wanted nothing there.

You can change the width and height, with the value in pixels (you don't need to add px after the number in HTML code) or percent (50%).
Recommend leaving frameborder="0" in there. It gets rid of the default grey border around the frame

Next, replace name="putanameinhere" with a name for the frame.
(Optional: If you want to use CSS on the frame you can also add id="putanidinhere")

Next, locate your links on the page to edit them. Add the target property to tell the links to open in the frame, like this:
<a href="http://www.google.ca" target="yourframenamehere">Google</a>
Just replace target="yourframenamehere" with whatever you named your frame, and do this for every link you want to open in the frame.
You're finished!

If you want to hide the scrollbar :
"scrolling = no"

Scrollable DIV region

If you have a long section of content in your page and you want it to appear within a fixed size area with a scrollbar, set the overflow css property to 'auto' and the browser will automatically add a scrollbar if your content exceeds the width and height dimensions you specify. Assuming your div has the id of "content", use the following CSS.
#content {
    width: 250px;
    height: 250px;
    overflow: scroll;
}
The result should look something like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique adipiscing urna, a blandit nunc lobortis at. Nunc eu est mauris, nec mattis magna. Curabitur condimentum ligula sed metus gravida tempus. Nulla facilisi. Nulla non tellus eros. Nulla eget libero et lacus vulputate tincidunt. In pharetra, libero lobortis imperdiet aliquam, eros leo gravida ante, sit amet elementum eros neque ut felis. Maecenas tincidunt, leo ac tristique condimentum, risus felis posuere mi, ac pulvinar orci arcu sed ipsum. Integer quis dolor eget enim interdum gravida. Donec posuere risus eu nibh tempus fringilla. Nulla tristique, augue tristique interdum pharetra, tellus justo lobortis sem, ac malesuada libero felis sit amet mauris. Nullam ut urna arcu, eu cursus quam. Aliquam adipiscing luctus pretium. Nam sit amet lacus arcu, nec vehicula libero. Pellentesque accumsan dolor facilisis lorem pharetra commodo. Etiam congue venenatis aliquam. Nunc blandit, metus sit amet pretium convallis, dolor augue rutrum lorem, vitae commodo tellus odio vel neque.

Praesent tortor sapien, convallis nec posuere quis, venenatis eu lorem. Cras vestibulum sem libero. Nunc tortor sapien, facilisis et sollicitudin et, porttitor ac purus. Vestibulum congue eleifend rhoncus. Sed fringilla, dolor in pellentesque porttitor, mauris nunc aliquam nunc, et commodo orci quam et ligula. Donec tempus, libero in suscipit imperdiet, erat tortor tristique lectus, ultrices elementum justo massa sit amet odio. Vivamus nisi augue, ultricies ut consequat ut, aliquam eget purus. Mauris nec lorem turpis, nec pulvinar dui. Vestibulum vitae vulputate libero. Nam dignissim pellentesque metus vel semper. Proin facilisis metus a lacus malesuada congue. Vivamus justo ante, hendrerit eu ultrices quis, accumsan ac turpis. Ut egestas faucibus massa lacinia sodales. Vivamus massa nibh, dignissim vel dapibus a, mattis non augue. Nam vitae tempus ipsum. Donec porttitor lectus in metus consequat vitae sollicitudin risus mattis. Donec erat metus, posuere ut ullamcorper sit amet, hendrerit id odio. Pellentesque porttitor libero pretium nunc pharetra fermentum a quis metus. Cras luctus varius turpis a porta.


--