Help with creating a web page...

Posted on 2000-03-26
Last Modified: 2008-03-06
I want to make the following web page, but I am too lazy to do this:

The index.html file will contain a picture at the middle of the page, with 12 hours. Each hour will contain a different aspect of the site I am presenting. By putting the mouse on an hour, this will change colour (or get bold, or something) and show with a small paragraph what this section contains. If the user clicks on that it takes him to that page (e.g. if he clicks at 2:00 which contains the subject football, it says somewhere "This is the football section". If the user clicks 2.html is loaded in this screen).

I can do it in flash but I do not want to.  I prefer to do it using simple images and/or Javascript for the mouseOn(), etc. If you have a better way, please include this as a solution.

(I was thinking of a 4x4 table centered in the page, each cell holding a gif whch changes when the mouse is on it, and when pressed takes me in the corresponding html page).

I also want it to be cross-browser compliant.

Any ideas? (please do not answer the question, just send a solution  as comment, and I will reward the points accordingly)
Question by:dinosaurus
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Expert Comment

ID: 2658268
Do you have the images?  If so, mail them here:

Expert Comment

ID: 2658843
use something like the following (supposing you got single images for every hour and there are no images before them)

 <script language="JavaScript">
    Normal1 = new Image();
    Normal1.src = "button1a.gif";                       Highlight1 = new Image();
    Highlight1.src = "button1b.gif";  

    /* where button1a is the normal pic and button1b is the pic shown when the mouse enters this area. repeat for all pics */

    function change(nr,object)
     window.document.images[nr].src = object.src;

<table border=0>
<tr><td><a href=1.html onMouseOver="change(0, Normal1)" onMouseOut="change(0,Highlight1)"><img src=button1a.gif></a></td>
<td><a href=2.html onMouseOver="change(1, Normal1)" onMouseOut="change(1,Highlight1)"><img src=button2a.gif></a></td>

and so on...

hope this helps

Expert Comment

ID: 2659022
If you make the table 7x7, you can probably make the thing look like a clock:

      x   x
    x       x
  x           x
    x       x
      x   x

You could probably even tweak it to make it look round.  Other than that, the script suggested above should work fine.

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Expert Comment

ID: 2659354
You should maybe think about using a tool for this, like macromedia fireworks.  It can be found at and I *think* it even has a shareware download (30 days just like flash).  what it basically allows you to do, is draw out your image, then cut it up into "slices".  it creates your tables for you, so when you slice the image, it will still load and look the same, only as several smaller images.  you can then delete all the dead space parts in the image, as in the areas that are the same color of your background on the page, if you have any.  great for file size reduction.  it also allows you to create different frames of the same image, which you can then modify to be your hots (mouse overs) and such.  Saves out all the scripting you need, both java and html too.  

Also, it has several different compression options, so when you export it, you can get your files down to a pretty acceptable size.  I would suggest gif at 128 for the pallet if the image itself allows it.

I think photoshop 5.5 has the same capabilities in the image ready package, but ive never used it so im not sure.


Accepted Solution

cybernietic earned 700 total points
ID: 2660104
Exemple page on my site :

Code :

<Title>Clock by Cybernietic</Title>
<Meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

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_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;

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];}
<Body bgcolor=#FFFFFF onLoad="MM_preloadImages('images/12-b.gif','images/int1.gif','images/1-b.gif','images/int2.gif','images/int3.gif','images/2-b.gif','images/3-b.gif','images/4-b.gif','images/5-b.gif','images/6-b.gif','images/7-b.gif','images/8-b.gif','images/9-b.gif','images/10-b.gif','images/11-b.gif')" background="images/backgroud.gif">
<!-- ImageReady Slices (test1.psd) -->
<Table border=0 cellpadding=0 cellspacing=0 align="center">
        <Td><Img src="images/spacer.gif" width=36 height=1></Td>
        <Td><Img src="images/spacer.gif" width=38 height=1></Td>
        <Td><Img src="images/spacer.gif" width=36 height=1></Td>
        <Td><Img src="images/spacer.gif" width=73 height=1></Td>
        <Td><Img src="images/spacer.gif" width=37 height=1></Td>
        <Td><Img src="images/spacer.gif" width=29 height=1></Td>
        <Td><Img src="images/spacer.gif" width=30 height=1></Td>
        <Td><Img src="images/spacer.gif" width=3 height=1></Td>
        <Td><Img src="images/spacer.gif" width=1 height=1></Td>
          <Td rowspan=3><Img src="images/test1_01.gif" width=36 height=119></Td>
        <Td colspan=2><Img src="images/test1_02.gif" width=74 height=42></Td>
          <Td><a href="url12.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('twelve','','images/12-b.gif','inner','','images/int1.gif',1)"><Img src="images/12.gif" width=73 height=42 name="twelve" border="0"></a></Td>
        <Td colspan=5><Img src="images/test1_04.gif" width=100 height=42></Td>
        <Td><Img src="images/test1_05.gif" width=38 height=34></Td>
          <Td><a href="url11.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('eleven','','images/11-b.gif','inner','','images/int3.gif',1)"><Img src="images/11.gif" width=36 height=34 name="eleven" border="0"></a></Td>
        <Td><Img src="images/test1_07.gif" width=73 height=34></Td>
          <Td><a href="url1.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('one','','images/1-b.gif','inner','','images/int2.gif',1)"><Img src="images/1.gif" width=37 height=34 name="one" border="0"></a></Td>
        <Td colspan=2><Img src="images/test1_09.gif" width=59 height=34></Td>
        <Td colspan=2><Img src="images/test1_10.gif" width=4 height=34></Td>
          <Td><a href="url1.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ten','','images/10-b.gif','inner','','images/int2.gif',1)"><Img src="images/10.gif" width=38 height=43 name="ten" border="0"></a></Td>
        <Td colspan=3 rowspan=3><Img src="images/test1_12.gif" width=146 height=135 name="inner"></Td>
          <Td><a href="url2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inner','','images/int3.gif','Image1','','images/2-b.gif',1)"><Img src="images/2.gif" width=29 height=43 border="0" name="Image1"></a></Td>
        <Td colspan=3><Img src="images/test1_14.gif" width=34 height=43></Td>
          <Td><a href="url1.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inner','','images/int1.gif','nine','','images/9-b.gif',1)"><Img src="images/9.gif" width=36 height=48 name="nine" border="0"></a></Td>
        <Td><Img src="images/test1_16.gif" width=38 height=48></Td>
          <Td><Img src="images/test1_17.gif" width=29 height=48></Td>
          <Td colspan=3><a href="url3.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inner','','images/int1.gif','three','','images/3-b.gif',1)"><Img src="images/3.gif" width=34 height=48 name="three" border="0"></a></Td>
        <Td rowspan=2><Img src="images/test1_19.gif" width=36 height=74></Td>
          <Td><a href="url1.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inner','','images/int3.gif','eight','','images/8-b.gif',1)"><Img src="images/8.gif" width=38 height=44 name="eight" border="0"></a></Td>
          <Td><a href="url1.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inner','','images/int2.gif','four','','images/4-b.gif',1)"><Img src="images/4.gif" width=29 height=44 name="four" border="0"></a></Td>
          <Td colspan=2 rowspan=2><Img src="images/test1_22.gif" width=33 height=74></Td>
        <Td><Img src="images/test1_23.gif" width=1 height=44></Td>
        <Td><Img src="images/test1_24.gif" width=38 height=30></Td>
          <Td><a href="url1.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inner','','images/int2.gif','seven','','images/7-b.gif',1)"><Img src="images/7.gif" width=36 height=30 name="seven" border="0"></a></Td>
        <Td><Img src="images/test1_26.gif" width=73 height=30></Td>
          <Td><a href="url1.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inner','','images/int3.gif','five','','images/5-b.gif',1)"><Img src="images/5.gif" width=37 height=30 name="five" border="0"></a></Td>
        <Td><Img src="images/test1_28.gif" width=29 height=30></Td>
        <Td><Img src="images/test1_29.gif" width=1 height=30></Td>
        <Td colspan=3><Img src="images/test1_30.gif" width=110 height=42></Td>      
          <Td rowspan=2><a href="url1.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inner','','images/int1.gif','six','','images/6-b.gif',1)"><Img src="images/6.gif" width=73 height=43 name="six" border="0"></a></Td>
        <Td colspan=5 rowspan=2><Img src="images/test1_32.gif" width=100 height=43></Td>
        <Td><Img src="images/test1_33.gif" width=36 height=1></Td>
        <Td><Img src="images/test1_34.gif" width=38 height=1></Td>
        <Td><Img src="images/test1_35.gif" width=36 height=1></Td>

Expert Comment

ID: 2667524
Much simpler here.  I posted it last night, but it seems to have been lost.

Anyway, go to

I already have it started for you...just put in your own graphics and copy/paste the Divisions, changing the ID names as you go.

Let me know if you have any questions.

Expert Comment

ID: 2667529
Also, mine preloads the graphics and works in both IE and Netscape.

Expert Comment

ID: 2681352
so are you going to accept any answers?

Author Comment

ID: 2682815
I had accepted this answer, why did it get lost? Anyway, thanks for all the answers...

Expert Comment

ID: 2683514
Apparently there was some problem with this forum...I know I had originally posted an answer right after TTom and even saw it there, but when I checked back the next day, it was gone and so cybernietic got his answer up first.  Oh well...

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
email validation 9 62
Validating Date Part2 2 45
Anyone familiar with PhotoSwipe? 3 40
CSS for Popup in ASP.NET 4 48
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question