SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
Thread: image resize, mouse pop-up
-
Jul 12, 2002, 06:12 #1
- 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.
-
Jul 12, 2002, 11:26 #2
- 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>
PHP Code:<table>
<tr>
<td rowspan="2"><img src="foo2span.jpg"></td>
<td>Second Column</td>
</tr>
<tr>
<td>Second Column</td>
</tr>
</table>
Ryan
-
Jul 12, 2002, 15:29 #3
- 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.
-
Jul 13, 2002, 18:14 #4
- 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 <= 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>
Ryan
-
Jul 15, 2002, 06:43 #5
- 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.
-
Jul 15, 2002, 06:52 #6
- Join Date
- May 2002
- Posts
- 19
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
also
Is the javascript client or server side scrpting ??
Thanks.
-
Jul 15, 2002, 14:21 #7
- 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
-
Jul 15, 2002, 14:22 #8
- 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
-
Jul 15, 2002, 14:24 #9
- 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>
(Start with "A")
Ryan
-
Jul 15, 2002, 15:20 #10
- 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.
-
Jul 17, 2002, 10:50 #11
- 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
-
Jul 18, 2002, 10:29 #12
- 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