Solved

Help with creating a web page...

Posted on 2000-03-26
10
225 Views
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)
Thanx
0
Comment
Question by:dinosaurus
10 Comments
 
LVL 3

Expert Comment

by:fibdev
ID: 2658268
Do you have the images?  If so, mail them here: expert@fibdev.com
0
 
LVL 1

Expert Comment

by:mafweb
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;
    }
   //-->
    //-->
   </script>

<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
0
 
LVL 9

Expert Comment

by:TTom
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   x
        x


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

Tom
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 2

Expert Comment

by:Hooligan
ID: 2659354
You should maybe think about using a tool for this, like macromedia fireworks.  It can be found at www.macromedia.com 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.

0
 
LVL 1

Accepted Solution

by:
cybernietic earned 700 total points
ID: 2660104
Exemple page on my site :
http://www.ping.be/~ping9791/clock/

Code :

<Html>
<Head>
<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];}
}
//-->
</script>
</Head>
<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">
      <Tr>
        <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>
      </Tr>
      <Tr>
          <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>
      </Tr>
      <Tr>
        <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>
      </Tr>
      <Tr>
          <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>
      </Tr>
      <Tr>
          <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>
      </Tr>
      <Tr>
        <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>
      </Tr>
      <Tr>
        <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>
      </Tr>
      <Tr>
        <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>
      </Tr>
      <Tr>
        <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>
      </Tr>
</Table>
</Body>
</Html>
0
 
LVL 2

Expert Comment

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

Anyway, go to http://www.50megs.com/frumanchu/test/test.html

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.
0
 
LVL 2

Expert Comment

by:pschwan
ID: 2667529
Also, mine preloads the graphics and works in both IE and Netscape.
0
 
LVL 2

Expert Comment

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

Author Comment

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

Expert Comment

by:pschwan
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...
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

786 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