ciao
spero di essere nella sezione giusta
come si fa ad ottenere l'effetto sulle immagini centrali di questo sito
http://www.lenovo.com/it/it/
inizialmente credevo fosse flash ma non lo è ... mi piace un sacco l'ida di farlo senza flash
io di programmazione, a parte un pò di asp non ne so nulla
avete lo script da passarmi
grazie
dovrebe essere tutto css e due righe di javascript ; abbastanza semplice.
5 minuti e ti posto un esempio.
eccolo:
per vedere come viene: QuiCodice PHP:<html>
<head>
<title>Prova</title>
<style>
<!--
.contenitore{
position:absolute;
left:20px;
top:20px;
width:800px;
height: 300px;
background-color :steelblue;
padding: 50px;
}
.piccolo{
position:relative;
width:150px;
height: 80px;
background-color : red;
border: 3px solid white;
cursor: hand
}
-->
</style>
<script language="JavaScript1.2">
function Del(){
for(i = 1 ; i < 4; i++)
document.getElementById(i).style.width = "150px";
}
function Cambia(obj){
Del();
obj.style.width = "170px";
var grosso = document.getElementById('0').style ;
if (obj.id == "1" )
grosso.background = "Steelblue";
else if (obj.id == "2" )
grosso.background= "Springgreen";
else if (obj.id == "3" )
grosso.background= "Orange";
}
</script>
</head>
<body>
<div id="0" class = "contenitore">
<div id="1" class="piccolo" onmouseover="Cambia(this);"></div>
<div id="2" class="piccolo" onmouseover="Cambia(this);"></div>
<div id="3" class="piccolo" onmouseover="Cambia(this);"></div>
</div>
</body>
</html>
up
visto che sei stato gentilissimo ne approfitto
VVoVe:
io vorrei farlo con le immagini, non coi colori...è possibile
si certo
Codice PHP:<html>
<head>
<title>Prova</title>
<style>
<!--
.contenitore{
position:absolute;
left:20px;
top:20px;
width:800px;
height: 300px;
background-image: url('img1.jpg'); //cambi qui
padding: 50px;
}
.piccolo{
position:relative;
width:150px;
height: 80px;
border: 3px solid white;
cursor: hand
}
-->
</style>
<script language="JavaScript1.2">
function Del(){
for(i = 1 ; i < 4; i++)
document.getElementById(i).style.width = "150px";
}
function Cambia(obj){
Del();
obj.style.width = "170px";
var grosso = document.getElementById('0').style ;
if (obj.id == "1" )
grosso.background= "url(img1.jpg)"; //cambi qui
else if (obj.id == "2" )
grosso.background= "url(img2.jpg)"; //cambi qui
else if (obj.id == "3" )
grosso.background= "url(img3.jpg)"; //cambi qui
}
</script>
</head>
<body>
<div id="0" class = "contenitore">
<div id="1" class="piccolo" onmouseover="Cambia(this);" Style="background-image: url('tuaimg1.jpg');"></div>
<div id="2" class="piccolo" onmouseover="Cambia(this);" Style="background-image: url('tuaimg2.jpg');"></div>
<div id="3" class="piccolo" onmouseover="Cambia(this);" Style="background-image: url('tuaimg3.jpg');"></div>
</div>
</body>
</html>
tuaimg 1 , 2 e 3 son quelle piccole nei rettangolini
ing1 ,2 e 3 quelle che vengono caricatre ne l div grosso
Ciao
sei stato gentilissimo
grazie mille
Permessi di invio
Rispondi quotando