Solved

Help with creating a web page...

Posted on 2000-03-26
10
231 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
[X]
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
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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

726 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