eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introducton to Web Design
Clickable Images  
  • Another cool trick you can do with images is to make them clickable. That is, you can put an anchor tag around them so that when the user moves their mouse over the image, they will be able to click on the image in order to go to some other page.

  • The process is exactly the same as for making text-based links except that you place the image where the text was.

  • In the following example, we make the icon clickable so that when the user clicks on it, they will be transported to the table of contents page for this tutorial. Remember that you can click on your browser's back button to return to this page.
<HTML>
<HEAD>
<TITLE>Click Here</TITLE>
</HEAD>
<BODY>
<A HREF = "toc.html">
<IMG SRC = "http://www.eff.org/asterix_icon.gif"></A>
</BODY>
</HTML>

  • Below we have added the above code to this page and made the clickable image for you to try out.

  • Notice that the image above is surrounded by a blue box. This blue box is like the underlining of link text. It lets the user know that the image is clickable.

  • However, in many cases, you will not want the blue box around your image. If this is the case, you need only set the BORDER attribute of the IMG tag to "0". For example, we can turn the border in the above image off by using the following code:
<A HREF = "toc.html">
<IMG SRC = "http://www.eff.org/asterix_icon.gif
          BORDER = "0"></A>

  • In this case, our clickable image would appear as below:

Previous Page | Next Page