|
|
| Autore |
Messaggio |
bambo
intermedio
Età: -1982
Registrato: 29/11/07 13:30
Messaggi: 104
Località: Verona
|
 Oggetto: rollover Disgiunto
Inviato: 04.03.08 | 12:13 |
 |
|
Ciao bella gente,
ho una question per voi. Dovrei creare un effetto come in questa pagina:
http://www.doc-pc.it/bps/home.htm
però non utlizzando script ma css e xhtml per tenere i link del menu individualbili, è fattibile o troppo laboriosa?
mi date degli input?
Grazie a tutti
____________________________________________________________
http://www.doc-pc.it Se hai bisogno di aiuto... |
|
| Torna in cima |
|
|
Sponsor
|
|
 |
Coach
amministratore
Età: -1981
Registrato: 31/01/03 13:50
Messaggi: 4549
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 12:58 |
|
|
Ciao bambo,
sarebbe meglio evitare links che un domani non saranno più raggiungibili.
A parte che quella pagina è orribile... è stata creata da Photoshop... Fireworks?  (tutte quelle immagini spaziatrici).
Il codice che visualizza le immagini è un javascript by Macromedia :)
Per applicarlo ad un link testuale anzichè le voci di menu/immagini che ci sono ora... ti basterà applicare lo stesso collegamento e richiamo di script che hai nell'href delle immagini/menu di ora all'href che avrai nelle voci di menu testuali.
.
____________________________________________________________
Il Forum è uno strumento di condivisione, oltre a fare DOMANDE, si possono anche dare RISPOSTE! |
|
| Torna in cima |
|
|
bambo
intermedio
Età: -1982
Registrato: 29/11/07 13:30
Messaggi: 104
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 13:00 |
|
|
Si si infatti e un esmpeio creato con macromedia.
Vorrei realizzare la stessa cosa ma con i css per tenere raggiungibili i link del menu dai boot.
E fattibile vero?
Questa pagina poi la trasformerò in xhtml
____________________________________________________________
http://www.doc-pc.it Se hai bisogno di aiuto... |
|
| Torna in cima |
|
|
Coach
amministratore
Età: -1981
Registrato: 31/01/03 13:50
Messaggi: 4549
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 13:03 |
|
|
Ma io che ti ho risposto? :)
Ti scrivo una cosa che forse può chiarirti le idee su come viene gestita una "pagina":
1) la struttura di è l'XHTML
2) il design, posizionamento e co è il CSS
3) i contenuti sono dati da testi, immagini e media...
4) interazione lato client è Ajax/Javascript
5) la parte dinamica viene scritta in linguaggi come PHP/ASP...
.
____________________________________________________________
Il Forum è uno strumento di condivisione, oltre a fare DOMANDE, si possono anche dare RISPOSTE! |
|
| Torna in cima |
|
|
bambo
intermedio
Età: -1982
Registrato: 29/11/07 13:30
Messaggi: 104
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 13:07 |
|
|
Ok proverò allora,
grazie coach
____________________________________________________________
http://www.doc-pc.it Se hai bisogno di aiuto... |
|
| Torna in cima |
|
|
bambo
intermedio
Età: -1982
Registrato: 29/11/07 13:30
Messaggi: 104
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 13:13 |
|
|
solo che io volevo crearlo senza javascript ma solo con css, avevo trovato un tutorial su web ma non risco a implementarlo
____________________________________________________________
http://www.doc-pc.it Se hai bisogno di aiuto... |
|
| Torna in cima |
|
|
bambo
intermedio
Età: -1982
Registrato: 29/11/07 13:30
Messaggi: 104
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 15:05 |
|
|
Posto il codice della pagina senza foglio di stile
| Codice: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
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>
</head>
<body bgcolor="#323338">
<div id="container">
<div id="menu">
<div id="header"></div>
<div id="menu_2"><a href="#">HOME</a> - AZIENDA - PRODOTTI - DOVE SIAMO - CONTATTI</div>
</div>
<div id="body">
<div id="logo_body"></div>
</div>
</div>
</body>
</html> |
Come posso implementarlo qui dentro?
____________________________________________________________
http://www.doc-pc.it Se hai bisogno di aiuto... |
|
| Torna in cima |
|
|
Coach
amministratore
Età: -1981
Registrato: 31/01/03 13:50
Messaggi: 4549
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 15:27 |
|
|
| bambo ha scritto: | | Posto il codice della pagina senza foglio di stile |
A me sembra invece che il link CSS ci sia :)
| bambo ha scritto: | | Come posso implementarlo qui dentro? |
Quindi di quello che ho scritto sopra non hai capito niente? 
Come ti ho scritto sopra ti basterà copiare la parte dell'href e dei vari eventi che vi erano sulle immagini di menu (aree mappate) nel nuovo link testuale, semplice.
| Codice: | <div id="menu_2">
<a href="home.htm" alt="Home" onmouseout="MM_swapImage('home_r2_c2','','immagini/home_r2_c2.jpg',1);" onmouseover="MM_swapImage('home_r2_c2','','immagini/home_r2_c2_f3.jpg',1);">HOME</a> - AZIENDA - PRODOTTI - DOVE SIAMO - CONTATTI
</div> |
____________________________________________________________
Il Forum è uno strumento di condivisione, oltre a fare DOMANDE, si possono anche dare RISPOSTE! |
|
| Torna in cima |
|
|
bambo
intermedio
Età: -1982
Registrato: 29/11/07 13:30
Messaggi: 104
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 15:34 |
|
|
L' aveo fatto ma non compare nulla, non capisco perchè
E lo sai che sono Bambo javascript:emoticon(' ')
Mr. Green
| Codice: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
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>
</head>
<body bgcolor="#323338">
<div id="container">
<div id="menu">
<div id="header"></div>
<div id="menu_2">
<a href="home.html" alt="Home" onmouseout="MM_swapImage('home','','home.jpg',1);" onmouseover="MM_swapImage('home','','home',1);">HOME</a> - AZIENDA - PRODOTTI - DOVE SIAMO - CONTATTI
</div>
</div>
<div id="body">
<div id="logo_body"></div>
</div>
</div>
</body>
</html> |
____________________________________________________________
http://www.doc-pc.it Se hai bisogno di aiuto... |
|
| Torna in cima |
|
|
bambo
intermedio
Età: -1982
Registrato: 29/11/07 13:30
Messaggi: 104
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 15:52 |
|
|
In sostanza una cosa cosi?
| Codice: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#323338">
<div id="container">
<div id="menu">
<div id="header"></div>
<div id="menu_2">
<li><a href="http:\\www.google.it" title="Descrizione del link 1"> HOME
<span>
<img src="home.jpg" /></span></a></li>
- AZIENDA - PRODOTTI - DOVE SIAMO - CONTATTI
</div>
</div>
<div id="body">
<div id="logo_body"></div>
</div>
</div>
</body>
</html> |
E vorrei che l' immagine andasse direttamente dentro al <div> body[/code]
____________________________________________________________
http://www.doc-pc.it Se hai bisogno di aiuto... |
|
| Torna in cima |
|
|
Coach
amministratore
Età: -1981
Registrato: 31/01/03 13:50
Messaggi: 4549
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 15:54 |
|
|
Infatti non era lo stesso codice, ti eri dimenticato un .jpg... ;)
Per la seconda risposta... non ho capito che intendi... non centra molto con quanto detot sino ad ora.
Devi capire come funziona il codice, altrimenti per ogni singola modifica dovrai andare a tentativi o farti modificare il codice da ltri ;)
.
____________________________________________________________
Il Forum è uno strumento di condivisione, oltre a fare DOMANDE, si possono anche dare RISPOSTE! |
|
| Torna in cima |
|
|
bambo
intermedio
Età: -1982
Registrato: 29/11/07 13:30
Messaggi: 104
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 16:03 |
|
|
il secondo metodo è come vorrei implementarlo io, con i css posto il codice dei css, se passi sopra a home hai lo stesso risultato ma senza utlizzare javascript solo non riesco a metterlo dentro al <div> body
| Codice: | @charset "utf-8";
#container {
margin: auto;
text-align: left;
width: 800px;
position: relative;
height: 650px;
}
#body {
position: absolute;
top: 84px;
left: 15px;
width: 750px;
height: 314px;
padding: 0;
border: 1px solid #FFFFFF;
}
#menu {
position: absolute;
width: 762px;
height: 79px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#header {
position: absolute;
left: 518px;
width: 254px;
height: 35px;
background-image: url(logo.jpg);
top: 33px;
}
#menu_2 {
position: absolute;
top: 57px;
width: 558px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
left: 16px;
height: 23px;
color: #FFFFFF;
}
#menu_2 li a span {
display: none;
}
#menu_2 li a:hover span {
width: 750px;
padding:10px;
position: absolute;
top: 17px;
display: block;
text-align: left;
}
a {
text-decoration: none;
color: #999999;
font-size: 1em;
padding: 1px 2px;
}
a:hover {
color: #FFFFFF;
}
acronym {
border-bottom:
1px dotted #cc0000;
cursor: help;
}
#logo_body {
position: absolute;
left: 546px;
top: 206px;
width: 200px;
height: 107px;
background-image: url(logo_body.jpg);
} |
____________________________________________________________
http://www.doc-pc.it Se hai bisogno di aiuto... |
|
| Torna in cima |
|
|
bambo
intermedio
Età: -1982
Registrato: 29/11/07 13:30
Messaggi: 104
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 16:28 |
|
|
Ci sono riuscito posto qui il codice magari a qualcuno serve
Grazie per l' aiuto coach
| Codice: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#323338">
<div id="container">
<div id="menu">
<div id="header"></div>
<div id="menu_2">
<A HREF="www.google.it"
onMouseOver="document.img1.src='home.jpg'; return true"
onMouseOut="document.img1.src='#'; return true">HOME</a> - AZIENDA - PRODOTTI - DOVE SIAMO - CONTATTI</div>
</div>
<div id="body">
<img src="#" name="img1"></div><div id="logo_body">
</div>
</div>
</body>
</html> |
____________________________________________________________
http://www.doc-pc.it Se hai bisogno di aiuto... |
|
| Torna in cima |
|
|
Coach
amministratore
Età: -1981
Registrato: 31/01/03 13:50
Messaggi: 4549
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 16:38 |
|
|
Bene!
...ma non è con CSS :P
.
____________________________________________________________
Il Forum è uno strumento di condivisione, oltre a fare DOMANDE, si possono anche dare RISPOSTE! |
|
| Torna in cima |
|
|
bambo
intermedio
Età: -1982
Registrato: 29/11/07 13:30
Messaggi: 104
Località: Verona
|
Oggetto:
Inviato: 04.03.08 | 16:41 |
|
|
Cosi no :-)
l' unico problema è che se la valido non risulta codice xhtml valido.
Scatolette 
____________________________________________________________
http://www.doc-pc.it Se hai bisogno di aiuto... |
|
| Torna in cima |
|
|
|
![[ Nascosto ]](templates/subSilver/images/lang_italian/icon_email.gif "[ Nascosto ]"){kind=icon}
