Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 241
  • Last Modified:

Help with creating a web page...

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
dinosaurus
Asked:
dinosaurus
1 Solution
 
fibdevCommented:
Do you have the images?  If so, mail them here: expert@fibdev.com
0
 
mafwebCommented:
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
 
TTomCommented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
HooliganCommented:
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
 
cybernieticCommented:
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
 
pschwanCommented:
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
 
pschwanCommented:
Also, mine preloads the graphics and works in both IE and Netscape.
0
 
pschwanCommented:
so are you going to accept any answers?
0
 
dinosaurusAuthor Commented:
I had accepted this answer, why did it get lost? Anyway, thanks for all the answers...
0
 
pschwanCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now