Images
Graphics
enhance a webpage immensely. Without them the page looks
boring, uninviting and your visitor is likely to leave.
Luckily they are very simple to implement.
To add an image into your page using Dreamweaver,
go to Insert => Image. A window will appear where you
can select your image from your files. Select the image
you want and click OK. The image will be inserted into your
webpage wherever the cursor was at the time.
This image was inserted in that simple way. You can get
images from almost anywhere (but remember to check for copywrite.)
The internet is full of useful images available for use
and with the use of a scanner, any real picture can be added
to the site as well.The raw HTML of the image is:
<img
src="web-site-design-claire.jpg"
width="137" height="137">
Basically this is just the location of the image
and its height and width. Simple!
Rollover Images
A common useful image is a rollover image. This is
an image which changes in the browser when the curser is
held over it. It consists of a primary image (the image
seen when the page initially loads) and the secondary image
(the image when the curser is over it). The two images need
to be of the same size, although Dreamweaver will resize
them if they are not.
To create a rollover image in Dreamweaver, Click on the
Common option of the Insert window and click on the rollover
image button (tenth from left). Click the curser where you
want the rollover button to be and a window will appear.
Insert an image name, the location of the primary image
and the location of the secondary image. If the rollover
image is also a link to another part of the site, add in
the url as well. Click OK and your rollover image will have
been created.
The rollover image uses two javascript functions
which must be inserted inside the head tags at the top of
the page .The functions below are provided by Macromedia.
With these inserted you can have as many rollover images
using the special a and img tags below.
<script language="JavaScript"
type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function MM_swapImage() {
//v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;
x.src=a[i+2];}
}
//-->
</script>
This is the raw html for the rollover image above:
<a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image2','','secondary_image.gif',1)"><img
src="primary_image.gif" name="Image2" width="100"
height="50" border="0"></a>
As you can see the raw html for rollovers
is much more complicated than inserting them using a design
package like Dreamweaver.
Inserting
and Modifying Tables
(previous)
| Web Design Guide (home)
| Links (next)
|
