[Risolto] Skin Più Popolari


Risolto [Risolto] Skin Più Popolari

Messaggio Da MattiaDes il Lun 13 Dic 2010 - 23:04

Salve ragazzi :)
Avete presente il widget che c'è qui su forum attivo, quello delle skin più popolari.
Io vorrei ottenere lo stesso effetto.
Molto gentilmente the crow mi ha fornito il codice, eccolo:

Spoiler:
<style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 300px}
.picshow_main { position: relative; width: 170px; height: 300px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 170px; height: 300px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 50px;}
.picshow_change img {width:15px; height: 15px}
.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px; -display: inline}
a.axx { border-color: #555}
a.axx:hover {border-color: #ffffff}
a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}
a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}
a.bxx { border-color: #000}
a.bxx:hover {border-color: #000}
img{
border:0px}
</style>
<SCRIPT language=javascript>
var counts = 5;
img1 = new Image();
img1.src = 'http://img222.imageshack.us/img222/4057/darkcorners.gif';
img2 = new Image();
img2.src = 'http://img195.imageshack.us/img195/4880/wendywuguerrieraallepri.gif';
img3 = new Image();
img3.src = 'http://img683.imageshack.us/img683/2455/14kilometros.gif';
img4 = new Image();
img4.src = 'http://img401.imageshack.us/img401/5674/yinyangmaster.gif';
img5 = new Image();
img5.src = 'http://img521.imageshack.us/img521/285/2020targetcriminale.jpg';

var smallImg = new Array();
smallImg[0] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_10.gif';
smallImg[1] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_11.gif';
smallImg[2] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_12.gif';
smallImg[3] = 'http://i63.servimg.com/u/f63/11/73/76/86/index_10.gif';
smallImg[4] = 'http://i63.servimg.com/u/f63/11/73/76/86/index_11.gif';

url1 = 'url pagina 1';
url2 = '------ 2';
url3 = '---- 3';
url4 = '------ 4';
url5 = '------5';

alt1 = new Image();
alt1.alt = ' titolo immagine 1';
alt2 = new Image();
alt2.alt = 'titolo immagine 2';
alt3 = new Image();
alt3.alt = 'titolo immagine 3';
alt4 = new Image();
alt4.alt = 'titolo immagine 4';
alt5 = new Image();
alt5.alt = 'titolo immagine 5';
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else if (document.all) {
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration = 2);
}
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("url_theme").href=url' + nn);
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").target = "_blank";
document.getElementById("url_theme").style.cursor = "pointer";
} else {
document.getElementById("url_theme").target = "_blank"
document.getElementById("url_theme").style.cursor = "pointer"
}

for ( var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 7000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function ImageShow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
ImageShow();
</SCRIPT>

Ho capito come cambiare le immagini da inserire, ma ho due problemi:
1) Non so dove devo mettere il link per collegare le immagini ad una pagina, infatti se ci clicco mi porta all'index
2) Le immagini che ci metto me le ridimensiona ... come risolvere questo problema ?

Grazie in anticipo :)



Ultima modifica di MOD-fenice il Mer 15 Dic 2010 - 15:37, modificato 1 volta
avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschile
Età : 21
Messaggi : 2967
Località : Modena, Italy


Vedi il profilo dell'utente http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da the crow il Mar 14 Dic 2010 - 1:15

ti ho scritto tutto...per non farti ridimensionare le immagini devi devi smanettare qui
Codice:
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 300px}
.picshow_main { position: relative; width: 170px; height: 300px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 170px; height: 300px}
...ecco fatto la pappa e' pronta...come ti ho gia' detto ieri bastava solo LEGGERE dentro il codice...se non avete voglio di fare neanche questo...siamo messi proprio male
avatar
the crow
Veterano dello staff

Sesso : Maschile
Età : 25
Messaggi : 8797
Località : Roma


Vedi il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da eddy il Mar 14 Dic 2010 - 7:01

ottimo crow ma si puo' ingrandire il riquadro?
avatar
eddy
****

Sesso : Maschile
Età : 67
Messaggi : 334
Località : campania


Vedi il profilo dell'utente http://sangiorgiodelsannio.forumattivo.com/
eddy è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da MattiaDes il Mar 14 Dic 2010 - 7:38

no crow, ovvio non voglio la pappa pronta ;-)
anche perchè tu non puoi sapere qual'è il risultato preciso che voglio ottenere, riguardo al problema delle dimensiono l'ho risolto :)
adesso ci sarebbe quello di collegare le immagini ai link io ho fatto così:

Codice:
img1 = new Image(link);
img1.src = 'http://i64.servimg.com/u/f64/15/84/48/29/avatar14.png';
img2 = new Image(link);
img2.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922311.png';
img3 = new Image(link);
img3.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922324.png';
img4 = new Image(link);
img4.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922331.png';
img5 = new Image(link);
img5.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922329.png';

dove ho messo la parola link ci ho messo il link, solo che non mi funziona :S
avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschile
Età : 21
Messaggi : 2967
Località : Modena, Italy


Vedi il profilo dell'utente http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da Insane il Mar 14 Dic 2010 - 10:15

Codice:
url1 = 'url pagina 1';
url2 = '------ 2';
url3 = '---- 3';
url4 = '------ 4';
url5 = '------5';
i link li devi inserire qui :good:
avatar
Insane
Aiutattivo
Aiutattivo

Sesso : Maschile
Età : 25
Messaggi : 4010
Località : Varese


Vedi il profilo dell'utente http://aiuto.forumattivo.it/
Insane è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da MattiaDes il Mar 14 Dic 2010 - 18:15

per centrare le immagini nel widget ? io ho fatto così, ma non funziona

Codice:
<style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 300px}
.picshow_main { position: relative; width: 170px; height: 180px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 150px; height: 170px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 50px;}
.picshow_change img {width:15px; height: 15px}
.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px; -display: inline}
a.axx { border-color: #555}
a.axx:hover {border-color: #ffffff}
a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}
a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}
a.bxx { border-color: #000}
a.bxx:hover {border-color: #000}
img{
border:0px}
</style>
<SCRIPT language=javascript>
var counts = 5;<div style="text-align: center;">img1 = new Image();
img1.src = 'http://i64.servimg.com/u/f64/15/84/48/29/immagi54.png';
img2 = new Image();
img2.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922340.png';
img3 = new Image();
img3.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922324.png';
img4 = new Image();
img4.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922341.png';
img5 = new Image();
img5.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922342.png';</div>

var smallImg = new Array();
smallImg[0] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_10.gif';
smallImg[1] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_11.gif';
smallImg[2] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_12.gif';
smallImg[3] = 'http://i63.servimg.com/u/f63/11/73/76/86/index_10.gif';
smallImg[4] = 'http://i63.servimg.com/u/f63/11/73/76/86/index_11.gif';

url1 = 'http://www.habbolifeforum.com/catalogo-habbo-f31/furni-ghiaccialo-t3237.htm';
url2 = 'http://www.habbolifeforum.com/catalogo-habbo-f31/furni-ghiaccialo-t3237.htm';
url3 = 'http://www.habbolifeforum.com/catalogo-habbo-f31/furni-ghiaccialo-t3237.htm';
url4 = 'http://www.habbolifeforum.com/catalogo-habbo-f31/furni-ghiaccialo-t3237.htm';
url5 = 'http://www.habbolifeforum.com/catalogo-habbo-f31/furni-ghiaccialo-t3237.htm';

alt1 = new Image();
alt1.alt = ' titolo immagine 1';
alt2 = new Image();
alt2.alt = 'titolo immagine 2';
alt3 = new Image();
alt3.alt = 'titolo immagine 3';
alt4 = new Image();
alt4.alt = 'titolo immagine 4';
alt5 = new Image();
alt5.alt = 'titolo immagine 5';
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else if (document.all) {
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration = 2);
}
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("url_theme").href=url' + nn);
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").target = "_blank";
document.getElementById("url_theme").style.cursor = "pointer";
} else {
document.getElementById("url_theme").target = "_blank"
document.getElementById("url_theme").style.cursor = "pointer"
}

for ( var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 7000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function ImageShow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
ImageShow();
</SCRIPT>
avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschile
Età : 21
Messaggi : 2967
Località : Modena, Italy


Vedi il profilo dell'utente http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da the crow il Mar 14 Dic 2010 - 22:41

Non devi centrare le immagini ma tutto il codice all'interno del widget e questo lo devi fare dall'esterno del codice
Codice:
<center> codice </center>
Domanda: ma non ti conviene ingrandire la struttura del codice quando la grandezza del widget?

xeddy: si devi smanettare all'interno del codice il mio e' impostato cosi'

Codice:
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 300px}
.picshow_main { position: relative; width: 170px; height: 300px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 170px; height: 300px}
avatar
the crow
Veterano dello staff

Sesso : Maschile
Età : 25
Messaggi : 8797
Località : Roma


Vedi il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da eddy il Mar 14 Dic 2010 - 22:51

:bene:
avatar
eddy
****

Sesso : Maschile
Età : 67
Messaggi : 334
Località : campania


Vedi il profilo dell'utente http://sangiorgiodelsannio.forumattivo.com/
eddy è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da MattiaDes il Mer 15 Dic 2010 - 15:36

grazie per l'aiuto
scusa the-crow se ti ho disturbato, sposto su risolto.
grazie ancora
avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschile
Età : 21
Messaggi : 2967
Località : Modena, Italy


Vedi il profilo dell'utente http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum