[Risolto] Skin Più Popolari

Da **MattiaDes** 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:

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 :)

Da the crow 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

Da eddy Mar 14 Dic 2010 - 7:01

ottimo crow ma si puo' ingrandire il riquadro?

Da **MattiaDes** 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

Da Insane 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:

Da **MattiaDes** 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>

Da the crow 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}