dotNetHell.it - Forum - Cambiare dimensioni di una ImageButton

Jok83 Profilo | Junior Member

139 messaggi | Data Invio: gio 29 apr 2010 - 14:43

Ciao a tutti,

scusate la domanda magari banale,uso Visualstudio linguaggio vb sulla mia pagina ho tre ImageButton sulle quali gestisco il mouse (onmouseover,onmouseout) nella aspx.vb così :

ImageButton1.Attributes.Add("OnMouseOut", "this.src='images/puntodomanda.jpg' ;")
ImageButton1.Attributes.Add("OnMouseOver", "this.src='images/puntoesclamativo.jpg';")

oltre al cambio d'immagine però vorrei cambiare anche la dimensione dell'Imagebutton quando ci passo col mouse solo che non riesco a trovare come farlo.
Sto facendo il tutto nel modo giusto?
Ci sono altre vie da seguire?

Grazie

Pinky Profilo | Junior Member

77 messaggi | Data Invio: ven 7 mag 2010 - 21:39

Anziche "this.src='images/puntodomanda.jpg'" con cui cambi il valore dell'attributo src devi richiamare una funzione dove puoi effettuare tutte le operazioni che ti aggradano.
ImageButton1.Attributes.Add("OnMouseOut", "img_mouseOut(this);"

function img_mouseOut(img) {
img.src = ...
img.style.width = ...
img.style.height = ...
}

Non ho testato il codice.

Non mi pare una buona idea ridimensionare tale immagine al mouseOut soprattutto se si tratta di un bottone, difatti quasi certamente avrai uno spiacevole effetto di spostamento del contenuto della pagina.
Ti assicuro che un utente reale troverà tale "difetto" molto più evidente rispetto a te che sei l'artefice di tale prodigio della programmazione.
Se fin qui ho ragione; per ovviare a questo sarebbe opportuno utilizzare due immagini identiche, magari in quella più piccola lasciare il fondo trasparente, ma renderla della stessa dimensione dell'altra.
Infine, non ne ricordo il nome ma esiste una tecnica che provoca il rollover solo tramite CSS (:hover e image-position) ed una unica immagine anziche due immagini, comunque è meglio fare un passo alla volta, quindi eventualmente puoi chiedermi un esempio o cercare in rete...

ciao
Alessandro

Jok83 Profilo | Junior Member

139 messaggi | Data Invio: lun 10 mag 2010 - 15:33

Inanzitutto grazie per la risposta,

mi è stato consigliato di usare gli style e alla fine per le mie imagebutton ho creato uno style così:
.style1
{
width: 250px;
height:250px;
}
.style1:hover
{
width: 350px;
height:350px;
}

il tutto fa quello che mi era stato chiesto ma come giustamente dici tu si crea un "brutto effetto" di sfasamento...
Ora se proprio devo come dicevi tu mi creo l'immagine piccola grande come quella allargata e credo si elimini questo effetto collaterale, però da quello che dici qui
>Infine, non ne ricordo il nome ma esiste una tecnica che provoca il rollover solo tramite CSS (:hover e image-position) ed una unica immagine anziche due immagini, >comunque è meglio fare un passo alla volta, quindi eventualmente puoi chiedermi un esempio o cercare in rete..
si può fare con una unica immagine gestendo l'image position...ho trovato qualcosina forse sto cercando di capire questo:
http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/
se giungo a qualche cosa ti farò sapere sono proprio agli inizi...
intanto ti ringrazio per l'interessamento e per la dritta!

Jok83 Profilo | Junior Member

139 messaggi | Data Invio: lun 10 mag 2010 - 15:40

Inanzitutto grazie per la risposta,

mi è stato consigliato di usare gli style e alla fine per le mie imagebutton ho creato uno style così:
.style1
{
width: 250px;
height:250px;
}
.style1:hover
{
width: 350px;
height:350px;
}

il tutto fa quello che mi era stato chiesto ma come giustamente dici tu si crea un "brutto effetto" di sfasamento...
Ora se proprio devo come dicevi tu mi creo l'immagine piccola grande come quella allargata e credo si elimini questo effetto collaterale, però da quello che dici qui
>Infine, non ne ricordo il nome ma esiste una tecnica che provoca il rollover solo tramite CSS (:hover e image-position) ed una unica immagine anziche due immagini, >comunque è meglio fare un passo alla volta, quindi eventualmente puoi chiedermi un esempio o cercare in rete..
si può fare con una unica immagine gestendo l'image position...ho trovato qualcosina forse sto cercando di capire questo:
http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/
se giungo a qualche cosa ti farò sapere sono proprio agli inizi...
intanto ti ringrazio per l'interessamento e per la dritta!

Pinky Profilo | Junior Member

77 messaggi | Data Invio: mar 11 mag 2010 - 00:30

Esattamente... per i bottoni solitamente basta usare
[tua_classe_css] { height:YYpx; background: #colore url(button.jpg) repeat-x; border:...}
#colore viene usato come background e visualizzato prima ancora che l'immagine sia renderizzata (utile se la pagina è un pò lenta, ma non necessario)
repeat-x fa ripetere l'immagine (solitamente una sfumatura) che può essere larga anche un solo pixel per tutta la lunghezza del bottone
[tua_classe_css]:hover { background-position: 0 -YYpx; } sposta l'immagine di -YY pixedl in verticale (fa cosi visualizzare la parte inferiore, la "seconda immagine").

Quindi l'immagine dovrà essere alta YY x2 ovvero contenere le due versioni una sopra l'altra, entrambe alte YY pixel.

Ciao
Alessandro

Jok83 Profilo | Junior Member

139 messaggi | Data Invio: mar 11 mag 2010 - 09:34

ho provato con uno dei pulsanti e ho l'effetto che cercavano...
Grazie per le dritte!!!