image resize, mouse pop-up

[sonu]

These are two different thing. I am putting ittogether for convenience.

First thing is this property I have to set (I think !!). I am not sure where.
Whats happening is that when I minimize a browser, the images get cluttered. Lke, if I have three images in one line on the top of the browser, then when I minimize the browser the images fall one belowthe other inthe smaller browser. How do I correct this.

Second question, how do I get a iamge to span two rows. I have to put up 4 images. The first image will san 2 rows, the second and thrid will span one row (one below the other) and the fourth will span 2 rows again. All tha images will align in the same line.

Third question is regardig mouse pop-ups when moved over a link. When I moe the mouse over a link, can I get it to display a list (like one below the other). Better still will be to display an active list. That is when I move the mouse over a link, then a list os links are displayed on eblow the other.

Thanks.

[Gybbyl]

Here is what i think your problem is:

1.) You need to make each of the images on the top in three different cells, or just use the one cell you already have and put a table in it:

<table>
  <tr>
    <td><image src="fooleft.jpg"></td>
    <td><image src="foomiddle.jpg"></td>
    <td><image src="fooright.jpg"></td>
  </tr>
</table> 

2.) You don't make the image span 2 rows, you put the image in a cell and make the cell span 2 rows.

<table>
  <tr>
    <td rowspan="2"><img src="foo2span.jpg"></td>
    <td>Second Column</td>
  </tr>
  <tr>
    <td>Second Column</td>
  </tr>
</table> 

3.) Try flash

[sonu]

Ok, I got the image resize part fixed -- the first two questions.
But I am still looking for an solution to my third problem. I serached for help, but couldnt find any.
Basically what I want is in this site. Go to this site and take your mouse over a link. It displaya drop down list of links.
http://www.davinci-days.org/index.htm
Please advise. Totorials, links would be great too !!
I want to use javascript.

[Gybbyl]

Did you view source on the page?? That always helps. LoL.

I hope your happy. I did some extremely easy digging for you. I guess you can use this if you want, its pretty simple (no sarcasm):

<SCRIPT language="JavaScript" type="text/javascript"><!--
  // Browser Compatibility Testing
  window.onerror=null; // Error Trapping
  var nn=(document.layers)?1:0;
  var ie=(document.all)?1:0;
  
  // START OF CUSTOMIZED INFORMATION
  //Miscelaneous variables for defining the pop-up boxes
  var boxWidth=""; // Width of pop-up box, for self formatting use "".
  var boxDelay="3"; // Delay time (in seconds) to keep the box displayed, default is "1.5" if not greater than "0".
  var borderColor=""; // color of the border (IE only)
  var borderLight=""; // color of the light shaded part of the border (IE only)
  var borderDark="#9999ff"; // color of the dark shaded part of the border (IE only)
  var backGround="#fdeed9"; // color of the background of the pop-ups (All Browsers)
  
// Image PreLoader for RollOvers
if (nn || ie){ // Use this box for defining all secondary images of rollovers, first two are for the pop-up boxes
 x0=new Image(); x0.src="../images/pixel.gif"; // Default Bullet (transparent)
 x1=new Image(); x1.src="../images/hover.gif"; // Hover arrow (visible)
 // x2=new Image(); x2.src="imagepath/imagename"; // add your own images using this format
}//-- End of PreLoader
  
  // Pop-Up Box Arrays
  // First element of each box contains the title of the pop-up and an opening statement.
  // Remaining elements of each box contain a link name and the associated URL.  
  
  Abox=new Array();
  Abox.id="boxA";
  Abox.imgname="A";
  Abox[0]=new boxLink("Highlights","");
  Abox[1]=new boxLink("Renowned Speakers","../schedule/speakers.htm");
  Abox[2]=new boxLink("Performing Arts","../schedule/performing_arts.htm");
  Abox[3]=new boxLink("Visual Arts","../schedule/visual_arts.htm");
  Abox[4]=new boxLink("Science & Technology","../schedule/science_tech.htm");
  Abox[5]=new boxLink("Races & Parades","../schedule/races_parades.htm");
  Abox[6]=new boxLink("International food court","../schedule/food.htm");
  Abox[7]=new boxLink("Children & Youth","../schedule/children_youth.htm");


  Bbox=new Array();
  Bbox.id="boxB";
  Bbox.imgname="B";
  Bbox[0]=new boxLink("Schedule","");
  Bbox[1]=new boxLink("Thursday, July 18","../schedule/thursday.htm");
  Bbox[2]=new boxLink("Friday, July 19","../schedule/friday.htm");
  Bbox[3]=new boxLink("Saturday, July 20","../schedule/saturday.htm");
  Bbox[4]=new boxLink("Sunday, July 21","../schedule/sunday.htm");
  Bbox[5]=new boxLink("","");

  
  Cbox=new Array();
  Cbox.id="boxC";
  Cbox.imgname="C";
  Cbox[0]=new boxLink("Admission","");
  Cbox[1]=new boxLink("Purchase Buttons","../admission/index.htm");
  Cbox[2]=new boxLink("","");

  
  Dbox=new Array();
  Dbox.id="boxD";
  Dbox.imgname="D";
  Dbox[0]=new boxLink("Find Your Way","");
  Dbox[1]=new boxLink("Getting to Corvallis","../find/index.htm");
  Dbox[2]=new boxLink("Parking","../find/parking.htm");
  Dbox[3]=new boxLink("Shuttles and busses","../find/shuttles_busses.htm");
  Dbox[4]=new boxLink("Maps","../find/maps.htm");
  Dbox[5]=new boxLink("Lodging","../find/lodging.htm");
  Dbox[6]=new boxLink("","");


  
  Ebox=new Array();
  Ebox.id="boxE";
  Ebox.imgname="E";
  Ebox[0]=new boxLink("Volunteer","");
  Ebox[1]=new boxLink("Board of Directors","../volunteer/board.htm");
  Ebox[2]=new boxLink("Management Committees","../volunteer/management.htm");
  Ebox[3]=new boxLink("Tasks you can help with","../volunteer/tasks.htm");
  Ebox[4]=new boxLink("Sign up online","../volunteer/sign_up.htm");
  Ebox[5]=new boxLink("","");


  Fbox=new Array();
  Fbox.id="boxF";
  Fbox.imgname="F";
  Fbox[0]=new boxLink("About Us","");
  Fbox[1]=new boxLink("Vision & Mission","../about/index.htm");
  Fbox[2]=new boxLink("Festival History","../about/history.htm");
  Fbox[3]=new boxLink("Make a Donation","../about/donate.htm");
  Fbox[4]=new boxLink("What's happening next year?","../about/next_year.htm");
  Fbox[5]=new boxLink("","");
  
  Gbox=new Array();
  Gbox.id="boxG";
  Gbox.imgname="G";
  Gbox[0]=new boxLink("Contact Us","");
  Gbox[1]=new boxLink("Quick Question","../contact/index.htm");
  Gbox[2]=new boxLink("Give us your feedback","../contact/feedback.htm");
  Gbox[3]=new boxLink("","");
  
  Hbox=new Array();
  Hbox.id="boxH";
  Hbox.imgname="H";
  Hbox[0]=new boxLink("da Vinci Store","");
  Hbox[1]=new boxLink("Purchase Clothing & Buttons","../store/index.htm");
  Hbox[2]=new boxLink("","");

  Ibox=new Array();
  Ibox.id="boxI";
  Ibox.imgname="I";
  Ibox[0]=new boxLink("Leonardo","");
  Ibox[1]=new boxLink("Who is Leonardo da Vinci?","../leonardo/index.htm");
  Ibox[2]=new boxLink("Online Resources","../leonardo/resources.htm");
  Ibox[3]=new boxLink("Printed Resources","../leonardo/resources_2.htm");
// To use HTML code in the description line, item [0], you MUST preceed all < and " with a \ as in \<
  // You also cannot use carriage returns, the enter key. This content must be all on one line.
  // Add more arrays as needed following pattern used for previous boxes
  // End of Pop-Up Box Arrays
  // END OF CUSTOMIZED INFORMATION
  
  // Pop-Up variables
  var boxStart=0;
  var boxStay=null;
  var onLayer;
  
  if (nn){ // Navigator Layer Changer
   layerStyleRef="layer.";
   layerRef="document.layers";
   styleSwitch="";
  }
  if (ie){ // Explorer Layer Changer
   layerStyleRef="layer.style.";
   layerRef="document.all";
   styleSwitch=".style";
  }
  
  function showLayer(layerName){ // Display Box
   if (nn || ie){
    if (boxStay != null){
     clearTimeout(boxStay);
     hideLayer(onLayer);
    }
    eval(layerRef+"[\""+layerName+"\"]"+styleSwitch+".visibility=\"visible\"");
    onLayer=layerName;
   }
  }
  
  function hideLayer(layerName){ // Hide Box
   if ((nn || ie) && (boxStart == 0)) eval(layerRef+"[\""+layerName+"\"]"+styleSwitch+".visibility=\"hidden\"");
  }
  
  if (boxDelay <= 0) boxDelay="1.5";
  
  function boxTimer(){  // Source MouseOut Delay
   boxStay=setTimeout("btnOut()",boxDelay*1000);
  }
  
  function btnOut(layerName){ // Source MouseOut
   if (boxStart == 0){hideLayer(onLayer);}
  }
  
  function boxOver(itemName){ // Box MouseOver Image
   clearTimeout(boxStay);
   boxStart=1;
   if (nn) document[onLayer].document.images[itemName].src=x1.src;
   else if (ie) document.all[itemName].src=x1.src;
  }
  
  function boxOut(itemName){ // Box MouseOut Image
   boxStart=0
   if (nn) document[onLayer].document.images[itemName].src=x0.src;
   else if (ie) document.all[itemName].src=x0.src;
   boxStay=setTimeout("hideLayer(onLayer)", 500);
  }
  
  function boxLink(title, url){ // Box Elements
   this.title=title;
   this.url=url;
  }
  
  function boxGen(boxArray){ // Build the Pop-Up Box
   N=eval(boxArray+".length")-1;
   n="\<DIV id=\""+eval(boxArray+".id")+"\">\<TABLE border=0 cellspacing=0 cellpadding=0 bgcolor=\""+borderColor+"\"";
    if (boxWidth != null) n+=" width=\""+boxWidth+"\"";
   n+=">\<TR>\<TD>\<TABLE border=2 cellspacing=0 cellpadding=3 ";
   if (boxWidth != null) n+="width=\"100%\"";
   n+=" bordercolor=\""+borderColor+"\" bordercolorlight=\""+borderLight+"\" bordercolordark=\""+borderDark+"\" bgcolor=\""+backGround+"\">\<TR>\<TD>";
   if (eval(boxArray+"[0].title") != "") n+="\<B>"+eval(boxArray+"[0].title")+"\<\/B>\<\/BR>";
   if (eval(boxArray+"[0].url") != "") n+="\<SMALL>"+eval(boxArray + "[0].url")+"\<\/SMALL>\<BR>";
   for (var i=1; i <=N; i++){
    n+="\<IMG src=\"images\/pixel.gif\" width=7 height=8 name=\""+eval(boxArray+".imgname")+i+"\" alt=\"o\"> ";
    n+="\<A class=\"bxlink\" href=\""+eval(boxArray+"["+i+"].url")+"\" onMouseOver=\"boxOver('"+eval(boxArray+".imgname")+i;
    n+="')\" onMouseOut=\"boxOut('"+eval(boxArray+".imgname")+i+"')\" class=\"boxes\">"+eval(boxArray + "[" +i+ "].title")+"\<\/A>\<BR>";
   }
   n+="\<\/TD>\<\/TR>\<\/TABLE>\<\/TD>\<\/TR>\<\/TABLE>\<\/DIV>";
   return n;
  }
  // --></SCRIPT> 

That said... I'm sure you will be asking another question.

[sonu]

what am I missing here ??
Plzzzzzzzzzzzzz, the supense is unbearable !!!
I guess my unexperinced self is not able to see it !!
After providing javascript script inthe page it would be as simple as,
<a href="schedule/highlights.htm" onMouseOut="boxTimer()" onMouseOver="showLayer('boxA')" id="A">Highlights</a><font>
Is it not ??
Thanksfor forseeing my ignorance.

[sonu]

Is the javascript client or server side scrpting ??
Thanks.

[Gybbyl]

Javascript is client side

And that is the code for the little mouse-over popups.

well, thats just the code that goes between <head> and </head>

[Gybbyl]

Let me go to the page again and see what the code is for each link... brb.

[Gybbyl]

Here is the code for the links:

<a href="schedule/index.htm" onMouseOut="boxTimer()" onMouseOver="showLayer('boxB')" id="B">Schedule</a> 

For each one, you have to change id="" to a different letter... i think on that site there highest one was f... so unless you know what to change in the HEAD js, i would just limit it to F..

(Start with "A")

[sonu]

give up. My brains are fried with other things today. I simply do not understand what I am missing. I followed your steps. Look into this page if you want to,
http://calamity.giccs.georgetown.edu...t/poptest.html
but still no luck.
Please advise.

[Gybbyl]

You have to change the link and text values in the JS code to refelct the pages you are trying to link to...

You'll want to do that first.

[sonu]

could there be a problem here. The reason is, if you go to this page,
http://calamity.giccs.georgetown.edu/poptest.html
In netscape taking the mouse over that link leads to nothing but in IE I get a popoup with the follwoing details,
problem with the web page might prevent from diplaying properly or function properly.
line: 135
char: 5
error: document.all.boxA.style not an object
code: 0
url: http://calamity.giccs.georgetown.edu/poptest.html

and cosequently the following message forever.

problem with the web page might prevent from diplaying properly or function properly.
line: 135
char: 5
error: document.all.undefined.style not an object
code: 0
url: http://calamity.giccs.georgetown.edu/poptest.html

Thanks.