3 rollovers together????

aconception · May 23, 2002

Hello !

Got to re-do that navigation menu

http://www.stifarex.se/eng/indexN.htm),

it seems that there are 3 rollovers "mixed" together?? I know how to do a rollover within dreamweaver (original image + rollover image) but 3 images????? (sorry about my english, I am not an english mother tongue). Somenone could have a look at that website and let me know how to do that? (I've got the authorisation for using that menu design by the way).
Thanks!!!
Nat

EugenePaliev · May 23, 2002

Hi Nat!

About what 3 rollovers are talking about?..

Anyway, creating "3 rollovers" at a time is not a problem.

1) create all rollovers separately (original image + rollover image);
2) select first rollover that should be called;
3) go to code view and find that piece of code
onMouseOver="MM_swapImage('image_name','','image_path',1)"

4) copy the code between double quotes ""
MM_swapImage('image_name','','image_path',1)

5) select an object that should call 3 rollovers (link or image);
6) go to code view and find that piece of code
onMouseOver="MM_swapImage('another_image_name','','another_image_path',1)"

7) put semicolon and paste code before last double quote:
onMouseOver="MM_swapImage('another_image_name','','another_image_path',1); MM_swapImage('image_name','','image_path',1)"

8) do steps 2-7 with two others rollovers.

Was it what you needed? Good Luck!

aconception · May 23, 2002

well well well, good luck I need indeed!

Thanks a lot anyway!!

EugenePaliev · May 23, 2002

Well, if I'm out of task, explain what is the real aim... Good Luck!

aconception · May 23, 2002

just tried :-( don't get it. Sorry....
(you are not out of task (did not know that expression

just me too stupid I guess.

In fact just want to "reproduce" the navigation menu from that web site "

http://www.stifarex.se/eng/indexN.htm":

menu link :

1/ font in blue when you look at it,
2/ grey when you go over it
3/ and blue + arrow when you click on it.

à plus

Nat

EugenePaliev · May 23, 2002

Finally got it!

There are two ways how you can accomplish this.

1) use graphical tool (FireWorks, PhotoPaint, etc.) which can easily can create it for you and simply export it into DW;
2) do some hand coding.

If you have Fireworks (fortunately most of DW users got it as well) use it to create needed button. If don't know how - I'll explain how. If you don't have graphical tool - I'll help you with a code. Good Luck!

aconception · May 23, 2002

prefer you to help me with a code if u don't mind, rollovers with fireworks are hell!!! Could you do it with 3 (fictives) images files names? (image1, image2, image3..)

bon off now, here it's 19.30, time to stop !

)

thanks for everything!!!!!!!!!!!!!!!!!!!!!!

Nat

EugenePaliev · May 24, 2002

LONG, LONG LISTING...
It's the code I took from your site, mailinks.htm - left file with site menus. I changed it for you so you may use it. Code I entered colored red.
Don't forget to create images and name them:
- menu28.gif - normal state
- menu39.gif - over state
- menu30.gif - clicked/pressed state

If it doesn't work - say - I haven't tested it...

<HTML>
<HEAD>
<TITLE>MAINLINKS</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">
selected_page=0;
address = new Array(10);
address[1] = "lopsedel.asp";
address[2] = "foretag.htm";
address[3] = "projekt.htm";
address[4] = "miljo.htm";
address[5] = "katalog.htm";
address[6] = "program.asp";
address[7] = "forum.htm";
address[8] = "adresser.htm";
address[9] = "Teknik.asp";
address[10] = "file_name.asp";

menuImages = new Array(30)
for(i = 1; i < 31; i++)
{

Code:

menuImages[i] = new Image(104,16)
   menuImages[i].src = &quot;bilder/navgif/meny&quot;+i+&quot;.gif&quot;
   }

function link(i)
{
selected_page=i;

if (i == 1)
document.images['one'].src=menuImages[i+2].src;
if (i == 2)
document.images['two'].src=menuImages[i+4].src;
if (i == 3)
document.images['three'].src=menuImages[i+6].src;
if (i == 4)
document.images['four'].src=menuImages[i+8].src;
if (i == 5)
document.images['five'].src=menuImages[i+10].src;
if (i == 6)
document.images['six'].src=menuImages[i+12].src;
if (i == 7)
document.images['seven'].src=menuImages[i+14].src;
if (i == 8)
document.images['eight'].src=menuImages[i+16].src;
if (i == 9)
document.images['nine'].src=menuImages[i+18].src;
if (i == 10)
document.images['ten'].src=menuImages[i+20].src;

parent.Right.location =

Code:

address[i];

if (selected_page != 1)
document.images['one'].src=menuImages[1].src;
if (selected_page != 2)
document.images['two'].src=menuImages[4].src;
if (selected_page != 3)
document.images['three'].src=menuImages[7].src;
if (selected_page != 4)
document.images['four'].src=menuImages[10].src;
if (selected_page != 5)
document.images['five'].src=menuImages[13].src;
if (selected_page != 6)
document.images['six'].src=menuImages[16].src;
if (selected_page != 7)
document.images['seven'].src=menuImages[19].src;
if (selected_page != 8)
document.images['eight'].src=menuImages[22].src;
if (selected_page != 9)
document.images['nine'].src=menuImages[25].src;
if (selected_page != 10)
document.images['ten'].src=menuImages[28].src;

}

function on_image(loc, track, img)
{
if (selected_page != track)
loc.src=menuImages.src;
}

function off_image(loc, track, img)
{
if (selected_page != track)
loc.src=menuImages[img].src;
}
</SCRIPT>
</HEAD>

<script language="JavaScript">

function popwin() {
var h=597,sc=0;
if(screen.height <= 600) {
h=500;
sc=1;
}
window.open("[URL unfurl="true"]http://195.100.37.10/idaserv/IdaServer","idamod",'width=788,height='+h+',scrollbars='+sc+',toolbar=0,status=yes,navigation=0,resizable=yes');[/URL]
}

</script>

<BODY BGCOLOR="#FFFFFF" MARGINWIDTH="0" MARGINHEIGHT="0">

<TABLE width="155">
<TR ALIGN="LEFT">

<TD VALIGN="TOP" ALIGN="LEFT" width="137" > <BR>
<A HREF="lopsedel.asp" TARGET="Right"><IMG SRC="../bilder/sflog_a.gif" WIDTH="100" HEIGHT="100" BORDER="0"></A>
<BR>
<BR>
<CENTER>
<div align="LEFT"> <A HREF="javascript:link(1)"
onMouseOver="on_image(one, 1, 2) ; self.status='News sheet' ; return true"
onMouseOut="off_image(one, 1, 1) ; self.status='' ; return true"> <font size="1"><IMG SRC="bilder/navgif/meny1.gif" NAME="one" ALT="News sheet" BORDER=0 WIDTH=104 HEIGHT=16 ALIGN="TOP">
</font></a> <font size="1"><A HREF="javascript:link(2)"
onMouseOver="on_image(two, 2, 5) ; self.status='Company' ; return true"
onMouseOut="off_image(two, 2, 4) ; self.status='' ; return true"> <IMG SRC="bilder/navgif/meny4.gif" NAME="two" ALT="Company" BORDER=0 WIDTH=104 HEIGHT=16 ALIGN="TOP">
</a> <A HREF="javascript:link(3)"
onMouseOver="on_image(three, 3, 8) ; self.status='Projects' ; return true"
onMouseOut="off_image(three, 3, 7) ; self.status='' ; return true"> <IMG SRC="bilder/navgif/meny7.gif" NAME="three" ALT="Projects" BORDER=0 WIDTH=104 HEIGHT=16 ALIGN="TOP">
</a> <A HREF="javascript:link(4)"
onMouseOver="on_image(four, 4, 11) ; self.status='Environment' ; return true"
onMouseOut="off_image(four, 4, 10) ; self.status='' ; return true"> <IMG SRC="bilder/navgif/meny10.gif" NAME="four" ALT="Environment" BORDER=0 WIDTH=104 HEIGHT=16 ALIGN="TOP">
</a> <A HREF="javascript:link(5)"
onMouseOver="on_image(five, 5, 14) ; self.status='Our Products' ; return true"
onMouseOut="off_image(five, 5, 13) ; self.status='' ; return true"> <IMG SRC="bilder/navgif/meny13.gif" NAME="five" ALT="Our Products" BORDER=0 WIDTH=104 HEIGHT=16 ALIGN="TOP">
</a> <A HREF="javascript:link(9)"
onMouseOver="on_image(nine, 9, 26) ; self.status='Technology' ; return true"
onMouseOut="off_image(nine, 9, 25) ; self.status='' ; return true"> <IMG SRC="bilder/navgif/meny25.gif" NAME="nine" ALT="Technology" BORDER=0 WIDTH=104 HEIGHT=16 ALIGN="TOP">
</a> <A HREF="javascript:link(6)"
onMouseOver="on_image(six, 6, 17) ; self.status='Software' ; return true"
onMouseOut="off_image(six, 6, 16) ; self.status='' ; return true"> <IMG SRC="bilder/navgif/meny16.gif" NAME="six" ALT="Software" BORDER=0 WIDTH=104 HEIGHT=16 ALIGN="TOP">
</a> <A HREF="javascript:link(7)"
onMouseOver="on_image(seven, 7, 20) ; self.status='Forum' ; return true"
onMouseOut="off_image(seven, 7, 19) ; self.status='' ; return true"> <IMG SRC="bilder/navgif/meny19.gif" NAME="seven" ALT="Forum" BORDER=0 WIDTH=104 HEIGHT=16 ALIGN="TOP">
</a> <A HREF="javascript:link(8)"
onMouseOver="on_image(eight, 8, 23) ; self.status='Addresses' ; return true"
onMouseOut="off_image(eight, 8, 22) ; self.status='' ; return true"> <IMG SRC="bilder/navgif/meny22.gif" NAME="eight" ALT="Addresses" BORDER=0 WIDTH=104 HEIGHT=16 ALIGN="TOP">
</a>[COLOR=red]<A HREF="javascript:link([b]10[/b])"
onMouseOver="on_image([b]ten, 10, 29[/b]) ; self.status='[b]put here describing text that apears in the status bar[/b]' ; return true"
onMouseOut="off_image([b]ten, 10, 28[/b]) ; self.status='' ; return true"> <IMG SRC="bilder/navgif/[b]meny28.gif[/b]" NAME="ten" ALT="[b]ALT TEXT[/b]" BORDER=0 [b]WIDTH=XX HEIGHT=XX[/b] ALIGN="TOP">
</a>[/color]</font> </div>

<SCRIPT language="JavaScript">

function navigate(form)

{

var go = (form.linkList.options[form.linkList.selectedIndex].value);

parent.Right.location.href="PDFlib"+go;

}

</SCRIPT>

<br>
<CENTER>
<table border="0" width="100" height=26>
<tr align=center valign=middle>
<td valign=middle><a href=javascript:popwin()><img src="bilder/PCWmenu.jpg" width="100" height="26" align="center" border=0></a></td>
</tr>
</table>
<FORM METHOD="POST" id=form1 name=form1>
<table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><font size=1 face="Verdana, Arial, Helvetica, sans-serif">Do
you know what product you're looking for? Download here! </font>
</td>
</tr>
</table>

<SELECT name="linkList">

<OPTION value="/eric/ACKa-2.pdf">ACKa.pdf</OPTION>
... HUGE NUMBER OF OPTIONS ...
<OPTION value="/klimsys/fasapp/YMCa.pdf">YMCa.pdf</OPTION>
</SELECT>
<BR>
<input type="BUTTON" value="Download!" onClick="navigate(this.form)">
<BR>
</form>
<BR>
<a href="q.htm" TARGET="Right"><img src="bilder/9001eng.gif" width="52" height="67" align="left" border=0></a><a href="q.htm" TARGET="Right"><img src="bilder/14001eng.gif" width="52" height="68" align="right" border=0></a>
</CENTER>

</center></TD>


<TD VALIGN="Top" WIDTH=10>
<CENTER>
<IMG SRC="../bilder/dotlod.gif" WIDTH="3" HEIGHT="329">
</CENTER>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Good Luck! :-)

aconception · May 27, 2002

Ok thanks!!!! will see what I can do with that. Bouhhh!!! Chinese

Merci for your patience though. Good day and good week, Nat

EugenePaliev · May 27, 2002

Hi Nat!

Tell me if you are successful with the code or not.

There exists one more way of doing what you need (and my fault that I didn't say about it earlier) - use Dreamweaver's behaviour - Set Nav Bar Image. I think this is the easiest way to acomplish what you need, the only problem with it is to rebuild whole menu (what may take couple of minutes). Good Luck!

Dumboy · May 27, 2002

At this point sounds like you guys have something going....

Dumboy.! Ouch.! .my brain.....
spiderdesign@yahoo.com

It's hard to think with only one neuron......Ouch.....!....it hurts when I think......!

aconception · May 28, 2002

was a bit "more" simple I must say....

ok gonna try that one. BTW are u using dreamweaver MX yet? Wonder if it's worth it, me still using version 4.

merci pour tout!!!

Nat

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

3 rollovers together????

aconception

Technical User

EugenePaliev

Programmer

aconception

Technical User

EugenePaliev

Programmer

aconception

Technical User

EugenePaliev

Programmer

aconception

Technical User

EugenePaliev

Programmer

aconception

Technical User

EugenePaliev

Programmer

Dumboy

Technical User

aconception

Technical User

Similar threads

Part and Inventory Search

Sponsor