onmouseover + funzioni

**sonny7y7y7y7y7y** · 06-01-2005, 20:21

allora ho provato in html a chiedere di spostarlo

chiedo scusa per il.....crossposting

ora il codice e' questo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE>esempio pratico </TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<script language="JavaScript">
<!--
function MM_preloadImages() { //v1.2
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
var preloadArray = new Array();
for (var i=0; i<imgFiles.length; i++) {
preloadArray[i] = new Image;
preloadArray[i].src = imgFiles[i];
}
}
}

function MM_swapImage() { //v1.2
var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
(objStr.indexOf('document.all[') ==0 && document.all ==null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.' ),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src

ldArray[j];
obj.src = MM_swapImage.arguments[i+2];
} }
document.MM_swapImgData = swapArray; //used for restore
}
//-->
</script>
<script language="JavaScript">

</script>

<STYLE>BODY {
BACKGROUND-COLOR: #ffffff
}
A {
COLOR: navy; TEXT-DECORATION: none
}
A:hover {
COLOR: red
}
A:visited:unknown {
COLOR: #808080
}
TD {
FONT-SIZE: 10pt; FONT-FAMILY: arial,helvetica
}
DIV.clTopMenu {
Z-INDEX: 31; VISIBILITY: hidden; WIDTH: 101px; CLIP: rect(0px 101px 14px 0px); POSITION: absolute; HEIGHT: 150px; BACKGROUND-COLOR: #eeeeee; layer-background-color: #EEEEEE
}
DIV.clTopMenuBottom {
Z-INDEX: 2; WIDTH: 101px; CLIP: rect(0px 101px 3px 0px); POSITION: absolute; TOP: 11px; HEIGHT: 3px; BACKGROUND-COLOR: #cecfce; layer-background-color: #CECFCE
}
DIV.clTopMenuText {
FONT-SIZE: 11px; Z-INDEX: 1; LEFT: 5px; WIDTH: 91px; FONT-FAMILY: arial,helvetica; POSITION: absolute; TOP: 15px; BACKGROUND-COLOR: #eeeeee
}
</STYLE>

<SCRIPT>

/************************************************** ******************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
************************************************** ******************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0

/************************************************** ******************************
If you want to change the appearens on the text, background-colors, size or
anything do that in the style tag above.

This menu might not be as easy to adapt to your own site, but please
play around with it before you mail me for help
************************************************** **************************/

/************************************************** *************************
Variables to set.
************************************************** **************************/
//How many menus do you have? (remember to copy and add divs in the body if you add menus)
var numberOfMenus=2
//The width on the menus (set the width in the stylesheet as well)
var mwidth=101
//Pixels between the menus
var pxBetween=10
//The first menus left position
var fromLeft=140
//The top position of the menus
var fromTop=130
//The bgColor of the bottom mouseover div
var bgColor='#CECFCE'
//The bgColor to change to
var bgColorChangeTo='#6380BC'
//The position the mouseover line div will stop at when going up!
var imageHeight=11
/************************************************** *************************
You shouldn't have to change anything below this
************************************************** **************************/
//Object constructor
function makeNewsMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+ob j+'.style')
this.scrollHeight=n?this.css.document.height:eval( 'document.all.'+obj+'.offsetHeight')
this.moveIt=b_moveIt;this.bgChange=b_bgChange;
this.slideUp=b_slideUp; this.slideDown=b_slideDown;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Objects methods
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(ie) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
}else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y>ystop){
this.moveIt(this.x,this.y-5); eval(wh)
setTimeout(this.obj+".slideUp("+ystop+","+moveby+" ,"+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y<ystop){
this.moveIt(this.x,this.y+5); eval(wh)
setTimeout(this.obj+".slideDown("+ystop+","+moveby +","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
//Initiating the page, making cross-browser objects
function newsMenuInit(){
oTopMenu=new Array()
for(i=0;i<=numberOfMenus;i++){
oTopMenu[i]=new Array()
oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
oTopMenu[i][1].moveIt(0,imageHeight)
oTopMenu[i][0].clipTo(0,mwidth,imageHeight+3,0)
oTopMenu[i][0].moveIt(i*mwidth+fromLeft+(i*pxBetween),fromTop)
oTopMenu[i][0].css.visibility="visible"
}
}
//Moves the menu
function topMenu(num){
if(oTopMenu[num][1].y==imageHeight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(imageHeight,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(bgColorChangeTo)}
function menuOut(num){oTopMenu[num][1].bgChange(bgColor)}

//Calls the init function onload

</SCRIPT>

</HEAD>

<body bgColor=white vLink=blue aLink=orange link=blue
leftMargin=0 topMargin=0 bgProperties=fixed MARGINWIDTH="0" MARGINHEIGHT="0">

<script language='JavaScript'>
MM_preloadImages('6on.gif');
</script>

<script language='JavaScript'>
MM_preloadImages('5on.gif');
</script>

<script language='JavaScript'>
MM_preloadImages('mailing.gif');
</script>

<script language='JavaScript'>
MM_preloadImages('javascript.gif');
</script>

<script language='JavaScript'>
MM_preloadImages('altro.gif');
</script>

<script language='JavaScript'>
MM_preloadImages('sfondo1xfitnesson.jpg');
</script>
<DIV class=clTopMenu id=divTopMenu0>[img]mailing.gif[/img]
<DIV class=clTopMenuText id=divTopMenuText0>qualcosa di utile.solo che devo ancora pensare a cosa mettere </DIV>
<DIV class=clTopMenuBottom id=divTopMenuBottom0></DIV></DIV>
<DIV class=clTopMenu id=divTopMenu1>[img]javascript.gif[/img]
<DIV class=clTopMenuText id=divTopMenuText1>La piu' grande raccolta italiana di
Javascript: oltre 330 esempi commentati con relativo codice ed esempio
pratico.
Clicca qui
</DIV>
<DIV class=clTopMenuBottom id=divTopMenuBottom1></DIV></DIV>
<DIV class=clTopMenu id=divTopMenu2>[img]altro.gif[/img]
<DIV class=clTopMenuText id=divTopMenuText2>Applet Java
XML
CSS
Grafica </DIV>
<DIV class=clTopMenuBottom id=divTopMenuBottom2></DIV></DIV>

<table border="0"><thead><tr><td>1111111111111111</td></tr>
</thead>

<tbody><tr><td>1</td>
<td>1</td>
</tr>
<tr>
<td>[img]sfondo1xfitness.jpg[/img]</td>
<td>1</td>
</tr>
</tbody>

<tfoot>
</tfoot></table>

</body>
</html>

qui c'e' la pagina in rete:
http://utenti.lycos.it/cucinare/prova3.html

ovviamente e' solo una prova non mi interessa ne quell'immagine ne dov'e' il menu'

quello che vorrei fare e':

mettere 1 foto rettangolare in bianco e nero tagliata
in 4 parti(immagini) interattive

foto
--------------------------------------------------
|parte1..............|.parte2..............|
|.......................|........................|
|.......................|........................|
--------------------------------------------------
|parte3..............|.parte4..............|
|.......................|........................|
|.......................|........................|
--------------------------------------------------

ogni parte al passaggio del mouse carica un altra foto(identica alla precedente ma con un background colorato e sfumato)
allo stesso tempo mi carica un menu scorrevole con i vari link (ogni quarto ha il proprio menu')

quindi quando tolgo il mouse dal quarto selezzionato mi chiude sia l'immagine caricata che il menu, e ci rimette la foto che c'era in precedenza

credo si possa fare....

l'unico problema e' che conosco benino l'html e i css
e pochissimo il javascript

sai aiutarmi?

io chiedo una cosa alla volta x non disturbare troppo
tutto qui

grazie x l'attenzione

ciao belli

Discussione: onmouseover + funzioni

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Permessi di invio