Solved

Help with creating a web page...

Posted on 2000-03-26
10
222 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
Comment Utility
Do you have the images?  If so, mail them here: expert@fibdev.com
0
 
LVL 1

Expert Comment

by:mafweb
Comment Utility
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
Comment Utility
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
 
LVL 2

Expert Comment

by:Hooligan
Comment Utility
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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 2

Expert Comment

by:pschwan
Comment Utility
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
Comment Utility
Also, mine preloads the graphics and works in both IE and Netscape.
0
 
LVL 2

Expert Comment

by:pschwan
Comment Utility
so are you going to accept any answers?
0
 

Author Comment

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

Expert Comment

by:pschwan
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now