Forum Home
Press F1
 
Thread ID: 33773 2003-05-25 06:45:00 HTML / Javascript Problem... Erin Salmon (626) Press F1
Post ID Timestamp Content User
147349 2003-05-25 06:45:00 Hi,

I have a javascript drop-menu which operates by hiding or showing a layer based on a mouse-over.

The layer is an image over which I want to put a map for links.

However, if I create the image inside the layer, the layer gives itself black border, which is most unnatractive. I can't find the code to get rid of it. If you can do this, it'd solve my problem. Any ideas?

My second approach was to make the image the background to the layer, which got rid of the border, but I was then unable to figure out how to put a map over it.

Help!

Thanks,

Erin 		Erin Salmon (626)
147350 2003-05-25 07:28:00 Hey
Have you tried telling the image that it is to have no border?? -


CyberChuck 		cyberchuck (173)
147351 2003-05-25 08:33:00 I forget where I have done it but with an image you can have hot spots. It might have been DreamWeaver. mikebartnz (21)
147352 2003-05-25 08:47:00 Yes indeed you can - hotspot or a map, as the code calls it. However, as far as I can ascertain, you can only use a map on an ordinary image, not a background image. I may be wrong...

If it were possible to create a map which was NOT on an image, I'd be sorted...

:P

Erin 		Erin Salmon (626)
147353 2003-05-25 08:50:00 When I say hotspots I don't mean a map mikebartnz (21)
147354 2003-05-25 09:02:00 There's a difference?

I'll go and do some research on the web, and see if I can figure it out.

Does a hotspot need an image, do you know?

Cheers,

Erin 		Erin Salmon (626)
147355 2003-05-25 09:05:00 Hi,

The only thing I could turn up on Hotspots was the 'Area' tag, which goes inside the 'Map' tag.

:S

Erin 		Erin Salmon (626)
147356 2003-05-25 09:17:00 Post the page, let us have a look at the code whiskeytangofoxtrot (438)
147357 2003-05-25 09:28:00 <HTML>
<HEAD>
<TITLE>Unleash - Quality Computers and Services</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<SCRIPT language="JavaScript"><!--

/*
The ultimate DHTML drop-down code
Nick Nettleton
www.computerarts.co.uk || www.fluid7.co.uk
--
This must be the single most requested bit of code in the history of Computer Arts, so we've decided to make it user-friendly and adaptable for everyone. Stacks more goodies to come too - head to one of the above sites for regular infoa nd updates.
Works with v4 and v5 browsers - both IE and NS. Update for NS6 coming. Also, be aware there's no way to automatically centre layers in the window - a JS for this coming soon. In the meantime, stick with left-aligned.
Keep an eye out for update for NS6.
--
You can adapt, use and distribute this code under GNU public licence, as long as:
(1) You leave all the comment and credit lines in, including these ones
(2) You don't sell it for profit
--
If you want to tweak the code yourself, use the f7_droplayer to set the names of the dropdowns, and just call f7_showdrop(n) and f7_hdidedrop from onmouseover, onmouseout and other events. Swap n for the number of the layer as in the array.
--
Enjoy!!!
*/

//names of dropdowns stored here
f7_droplayer=new Array()
f7_droplayer[0]="drop1"
f7_droplayer[1]="drop2"
f7_droplayer[2]="drop3"
f7_droplayer[3]="drop4"
f7_droplayer[4]="drop5"
f7_droplayer[5]="drop6"
f7_droplayer[6]="drop7"


//simple browser check
f7_v4=(parseInt(navigator.appVersion)>=4 && parseInt(navigator.appVersion)<=5)?1:0
f7_ie=(document.all && f7_v4)?1:0
f7_ns=(document.layers && f7_v4)?1:0


//code for drops

function f7_showdrop(thelayer){
f7_keep=thelayer; f7_hideall(); f7_showitnow=1
f7_showit(thelayer)
}

function f7_showit(thelayer){
if(f7_ie){ eval(f7_droplayer[thelayer]+'.style.visibility="visible"') }
if(f7_ns){ eval('document.'+f7_droplayer[thelayer]+'.visibility="show"');}
}


function f7_hidedrop(){
f7_keep=-1; setTimeout('f7_hideall()',500)
}

f7_keep=-1

function f7_hideall(){
for(i=0;i<f7_droplayer.length;i++){
f7_hideit=0; f7_checkmousepos(i)
if(f7_ie && f7_keep!=i){
if(f7_hideit){ eval(f7_droplayer[i]+'.style.visibility="hidden"') }
}
if(f7_ns && f7_keep!=i){
if(f7_hideit){ eval('document.'+f7_droplayer[i]+'.visibility="hide"') }
}
}
}

//deal with cursor over layer
document.onmousemove = f7_getmousepos
if (f7_ns) document.captureEvents(Event.MOUSEMOVE)

function f7_getmousepos(e){
if(f7_ns){f7_mousex=e.pageX; f7_mousey=e.pageY}
if(f7_ie){f7_mousex=event.clientX; f7_mousey=event.clientY;}
}

function f7_checkmousepos(i){
if(f7_ns){
f7_x_min=eval('document.'+f7_droplayer[i]+'.left')
f7_x_max=f7_x_min+eval('document.'+f7_droplayer[i]+'.clip.width')
f7_y_min=eval('document.'+f7_droplayer[i]+'.top')
f7_y_max=f7_y_min+eval('document.'+f7_droplayer[i]+'.clip.height')
}
if(f7_ie){
f7_x_min=eval(f7_droplayer[i]+'.style.pixelLeft')
f7_x_max=f7_x_min+eval(f7_droplayer[i]+'.scrollWidth')
f7_y_min=eval(f7_droplayer[i]+'.style.pixelTop')
f7_y_max=f7_y_min+eval(f7_droplayer[i]+'.scrollHeight')
}
if (f7_mousex>=f7_x_min && f7_mousex<=f7_x_max && f7_mousey>=f7_y_min && f7_mousey<=f7_y_max){
f7_hideit=0; setTimeout('f7_hideall()',500)
}
else { f7_hideit=1 }
return f7_hideit
}

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];}}
}

//--></SCRIPT>
<SCRIPT language="JavaScript"><!--

//browser stylesheets

if(f7_ie){
document.write('<style type="text/css"><!--')

document.write('.dropdown { height: 1px; width: 1px; padding-left:10px; padding- top: 10px; padding-right:10px; padding-bottom:10px;}')
document.write('p { margin- top: 0px; margin-bottom:6px }')
document.write('a { text-decoration: none }')
document.write('a:hover { color: white }')
document.write('--></style>')
}

//--></SCRIPT>
<STYLE type="text/css">
<!--

p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1 1px; line- height: 17px}
td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1 1px; }

.header { font: bold 24px Arial, Verdana, Helvetica, sans-serif }
.subhead { font-weight: bold; font-size: 12px }
.list { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; text-decoration: none }
.forms { font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif }

.dropdown { position: absolute; color:black; width: 140px; border: #000000; border-style: solid; border-top- width: 1px; border-right- width: 1px; border-bottom- width: 1px; border-left- width: 1px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top: 110px; z-index:1; visibility: hidden ;}
.drophead { color:#333333; font: bold 12px Verdana, Arial, Helvetica, sans-serif; text-decoration:none }
.dropitem { text-decoration:none; color:black; font: 12px Arial, Verdana, Helvetica, sans-serif;}
.drophead:hover { color:black; text-decoration:none }
.dropitem:hover { color:black; font: bold }

-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#304171" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad=MM_preloadImages('images/computermenu.gif','images/LaptopMenu.gif','images/OrderingMenu.gif','images/WarrantiesMenu.gif')>
<TABLE WIDTH=1000 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD>
images/spacer.gif </TD>
<TD> </TD>
</TR>
<TR>

<TD COLSPAN=10>
<div id="drop1" class="dropdown" style="left:16px;; top: 159px; width: 100px; height: 110px; z-index: 0" onMouseOver="f7_showdrop(0)" onMouseOut="f7_hidedrop()"> images/computermenu.gif </div>
<div id="drop2" class="dropdown" style="left:156px;; top: 159px; width: 136px; height: 92px; background-image: url(images/LaptopMenu.gif); layer-background-image: url(images/LaptopMenu.gif); border: 1px none #000000" onMouseOver="f7_showdrop(1)" onMouseOut="f7_hidedrop()"> </div>
<div id="drop3" class="dropdown" style="left:154px;" onMouseOver="f7_showdrop(2)" onMouseOut="f7_hidedrop()">


• Link 1 (#)

• Link 1 (#)

• Link 1 (#)

• Link 1 (#)</p>
</div>
<div id="drop4" class="dropdown" style="left:244px;" onMouseOver="f7_showdrop(3)" onMouseOut="f7_hidedrop()">


• Link 1 (#)

• Link 1 (#)

• Link 1 (#)

• Link 1 (#)</p>
</div>
<div id="drop5" class="dropdown" style="left:352px;" onMouseOver="f7_showdrop(4)" onMouseOut="f7_hidedrop()">


• Link 1 (#)

• Link 1 (#)

• Link 1 (#)

• Link 1 (#)</p>
</div>
<div id="drop6" class="dropdown" style="left:424px;" onMouseOver="f7_showdrop(5)" onMouseOut="f7_hidedrop()">


• Link 1 (#)

• Link 1 (#)

• Link 1 (#)

• Link 1 (#)</p>
</div>
<div id="drop7" class="dropdown" style="left:493px;" onMouseOver="f7_showdrop(6)" onMouseOut="f7_hidedrop()">


• Link 1 (#)

• Link 1 (#)

• Link 1 (#)

• Link 1 (#)</p>
</div>
images/index_01.jpg </TD>
<TD COLSPAN=14>
images/index_02.jpg </TD>
<TD>
images/index_03.jpg </TD>
<TD COLSPAN=2>
images/index_04.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD>
images/index_05.jpg </TD>
<TD COLSPAN=26 ROWSPAN=2>
images/index_06.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD ROWSPAN=3>
images/index_07.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD COLSPAN=13>
images/index_08.jpg </TD>
<TD ROWSPAN=4>
images/index_09.jpg </TD>
<TD COLSPAN=12>
images/index_10.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD COLSPAN=4>
images/index_11.jpg </TD>
<TD COLSPAN=3 ROWSPAN=3>
images/index_12.jpg (#) </TD>
<TD>
images/index_13.jpg </TD>
<TD COLSPAN=2 ROWSPAN=3>
images/index_14.jpg </TD>
<TD>
images/index_15.jpg </TD>
<TD ROWSPAN=3>
images/index_16.jpg </TD>
<TD>
images/index_17.jpg </TD>
<TD>
images/index_18.jpg </TD>
<TD COLSPAN=5 ROWSPAN=3>
images/index_19.jpg </TD>
<TD COLSPAN=6>
images/index_20.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD COLSPAN=3>
images/index_21.jpg </TD>

<TD ROWSPAN=2> images/index_22.jpg (#) </TD>
<TD>
images/index_23.jpg </TD>
<TD>
images/index_24.jpg </TD>
<TD>
images/index_25.jpg </TD>
<TD>
images/index_26.jpg </TD>
<TD>
images/index_27.jpg </TD>

<TD COLSPAN=6 background="images/index_28.jpg"> </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD COLSPAN=2>
images/index_29.jpg </TD>
<TD ROWSPAN=2>
images/index_30.jpg </TD>
<TD ROWSPAN=2>
images/index_31.jpg </TD>
<TD ROWSPAN=2>
images/index_32.jpg </TD>
<TD ROWSPAN=2>
images/index_33.jpg </TD>
<TD ROWSPAN=2>
images/index_34.jpg </TD>
<TD ROWSPAN=2>
images/index_35.jpg </TD>
<TD COLSPAN=6 ROWSPAN=2>
images/index_36.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD COLSPAN=2 ROWSPAN=2>
images/index_37.jpg </TD>
<TD>
images/index_38.jpg </TD>
<TD COLSPAN=3>
images/index_39.jpg </TD>
<TD COLSPAN=2>
images/index_40.jpg </TD>
<TD>
images/index_41.jpg </TD>
<TD>
images/index_42.jpg </TD>
<TD COLSPAN=5>
images/index_43.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD COLSPAN=15>
images/index_44.jpg </TD>
<TD COLSPAN=2 ROWSPAN=3>
images/index_45.jpg </TD>
<TD COLSPAN=3 ROWSPAN=4>
images/index_46.jpg </TD>
<TD ROWSPAN=3>
images/index_47.jpg </TD>
<TD COLSPAN=4 ROWSPAN=3>
images/index_48.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>

<TD COLSPAN=17> </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>

<TD COLSPAN=6 ROWSPAN=6 bgcolor="#426B96"> </TD>
<TD COLSPAN=11 ROWSPAN=5>
images/index_51.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD COLSPAN=2>
images/index_52.jpg </TD>
<TD COLSPAN=4 ROWSPAN=3>
images/index_53.jpg </TD>
<TD>
images/index_54.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD ROWSPAN=3>
images/index_55.jpg </TD>
<TD>
images/index_56.jpg </TD>
<TD ROWSPAN=3>
images/index_57.jpg </TD>
<TD COLSPAN=2>
images/index_58.jpg </TD>
<TD ROWSPAN=3>
images/index_59.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD ROWSPAN=2>
images/index_60.jpg </TD>
<TD COLSPAN=2 ROWSPAN=2>
images/index_61.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD COLSPAN=4>
images/index_62.jpg </TD>
<TD>
images/spacer.gif </TD>
</TR>
<TR>
<TD>
images/index_63.jpg </TD>

<TD COLSPAN=20 bgcolor="#FFFFFF" align="left" valign="top"> </TD>
<TD>
images/spacer.gif </TD>
</TR>
</TABLE>


</BODY>
</HTML> 		Erin Salmon (626)
147358 2003-05-25 09:30:00 The first drop-menu is with the image inside the layer, and the second with the image as a background.

View the page at homepages.paradise.net.nz

Erin 		Erin Salmon (626)
1 2