SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    May 2002
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image resize, mouse pop-up

    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.

  2. #2
    public static void brain Gybbyl's Avatar
    Join Date
    Jun 2002
    Location
    Montana, USA
    Posts
    647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    PHP Code:
    <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.

    PHP Code:
    <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
    Ryan

  3. #3
    SitePoint Member
    Join Date
    May 2002
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    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.

  4. #4
    public static void brain Gybbyl's Avatar
    Join Date
    Jun 2002
    Location
    Montana, USA
    Posts
    647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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):

    PHP Code:
    <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 <= 0boxDelay="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 (
    nndocument[onLayer].document.images[itemName].src=x1.src;
       else if (
    iedocument.all[itemName].src=x1.src;
      }
      
      function 
    boxOut(itemName){ // Box MouseOut Image
       
    boxStart=0
       
    if (nndocument[onLayer].document.images[itemName].src=x0.src;
       else if (
    iedocument.all[itemName].src=x0.src;
       
    boxStay=setTimeout("hideLayer(onLayer)"500);
      }
      
      function 
    boxLink(titleurl){ // 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 != nulln+=" width=\""+boxWidth+"\"";
       
    n+=">\<TR>\<TD>\<TABLE border=2 cellspacing=0 cellpadding=3 ";
       if (
    boxWidth != nulln+="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<=Ni++){
        
    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.

    Ryan

  5. #5
    SitePoint Member
    Join Date
    May 2002
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    yeah

    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.

  6. #6
    SitePoint Member
    Join Date
    May 2002
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    also

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

  7. #7
    public static void brain Gybbyl's Avatar
    Join Date
    Jun 2002
    Location
    Montana, USA
    Posts
    647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Ryan

  8. #8
    public static void brain Gybbyl's Avatar
    Join Date
    Jun 2002
    Location
    Montana, USA
    Posts
    647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me go to the page again and see what the code is for each link... brb.
    Ryan

  9. #9
    public static void brain Gybbyl's Avatar
    Join Date
    Jun 2002
    Location
    Montana, USA
    Posts
    647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the code for the links:

    PHP Code:
    <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")

    Ryan

  10. #10
    SitePoint Member
    Join Date
    May 2002
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I

    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.

  11. #11
    public static void brain Gybbyl's Avatar
    Join Date
    Jun 2002
    Location
    Montana, USA
    Posts
    647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ryan

  12. #12
    SitePoint Member
    Join Date
    May 2002
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    had tried that

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •