Cambio di 2 immagini sul focus di una di queste

sabato 15 maggio 2010 - 10.13

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

Jok83 Profilo | Junior Member

139 messaggi | Data Invio: sab 15 mag 2010 - 10:13

Ciao a tutti
mi sembra di ripetermi ma non capisco dove sbaglio...
devo cambiare due immagini quando una di queste prende o perde il focus, le mie immagini sono ImageButton5 e image2,
nella parte vb richiamo la funzione così:
ImageButton5.Attributes.Add("OnMouseOut", "img5_mouseOut();")
ImageButton5.Attributes.Add("OnMouseOver", "img5_mouseOver();")

nella mia home (non so se serve ma è contenuta in una masterpage) sotto il tag style ho messo questo:
<script type="text/javascript">
function img5_mouseOut() {
document.getElementById("ImageButton5").src = "Images/Button1.png";
document.getElementById("Image2").src = "Images/Button1.png"
}
function img5_mouseOver() {
document.getElementById("ImageButton5").src = "Images/Pulsante11.png";
document.getElementById("Image2").src = "Images/Button1.png"
}
</script>

però non mi cambia nessuna delle due...
il rollover per una sola immagine seguendo le indicazioni datemi nel post precedente l'avevo anche fatto così:

ImageButton5.Attributes.Add("OnMouseOut", "this.src='images/button1.png';")
ImageButton5.Attributes.Add("OnMouseOver", "this.src='images/pulsante1.png';")

ma mi è stato chiesto di cambiare anche una scritta sulla home e quando richiamo qualcosa che va nel tag script non mi funziona nulla....
poi scusate la domanda da neofita...
come faccio a capire se ci sono errori nel codice javascript che creo?
esiste la possibilità di andare in debug?

andrestu Profilo | Expert

772 messaggi | Data Invio: sab 15 mag 2010 - 10:33

guarda così a occhio, non vorrei dirti una cazzata, ma è un problema di ID.
Visto che la home è contenuta in una master gli ID dei controlli non vengono renerizzati così come li hai impostati, quindi Javascript non trova l'elemento.

fai una prova senza masterpage, in un pagina semplice...

Jok83 Profilo | Junior Member

139 messaggi | Data Invio: sab 15 mag 2010 - 11:29

TOMBOLA!!!
Ho provato su una pagina senza la master che ho chiamato prova..
questo è l'head dove ho messo il codice:

 Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

e funziona...
però come faccio a fargli riconoscere l'id sull'altra?

andrestu Profilo | Expert

772 messaggi | Data Invio: sab 15 mag 2010 - 11:39

il metodo più "grossolono" è andare a vedere come vengono renderizzati gli ID dei controlli che ti interessano da browser e inserirli così nel Javascript...
altrimenti fai il bind della proprietà clientID dei controlli nella pagina, aspe che cerco un pò di codice da postarti

andrestu Profilo | Expert

772 messaggi | Data Invio: sab 15 mag 2010 - 12:05

puoi usare anche questo codice, o lo inserisci come attributo via codice oppure direttamente in line all'interno del tag.

onmouseover="this.src = 'percorso immagine';"

forse questo è il modo più semplice e diretto, così eviti anche di inserire ulteriore codice javascript

e se vuoi anche cambiare il cursore tipo manina

onmouseover="this.src = 'percorso immagine'; this.style.cursor = 'pointer';"

Jok83 Profilo | Junior Member

139 messaggi | Data Invio: sab 15 mag 2010 - 12:10

Intanto grazie per la disponibilità e per le risposte..
Eh questo lo usavo prima...ma ora praticamente quando un pulsante prende il focus devo fare il "rollover" del pulsante e cambiare un' altra immagine sulla home....
>il metodo più "grossolono" è andare a vedere come vengono renderizzati gli ID dei controlli che ti interessano da browser e inserirli così nel Javascript..
come faccio a fare questo?

Grazie

andrestu Profilo | Expert

772 messaggi | Data Invio: sab 15 mag 2010 - 12:44

"Eh questo lo usavo prima...ma ora praticamente quando un pulsante prende il focus devo fare il "rollover" del pulsante e cambiare un' altra immagine sulla home...."

non ho ben capito, ma il risultato che vuoi ottenere non è tipo un pulsante immagine che cambia immagine in base a se il mouse è sopra di esso o no??? cosa intendi con la frase di sopra? rollover?
è normale che al codice di prima devi anche aggiungerne un altro x l'evento OnMouseOut, in modi che quando ti sposti con il mouse viene ripristinata l'immagine di partenza, io lho utilizzato senza problemi.
x trovare gli ID praticamente in qualsiasi browser cè da qualche parte un "visualizza codice sorgente"... una volta che hai il codice sorgente fai una ricerca testo e ci metti l'ID che hai inserito in aspnet, vedrai che lo troverai associato ad un elemento il quale ID è composto dal testo cercato in aggiunta ad altro testo...
Praticamente in alcuni casi Aspnet crea gli ID dinamicamente quindi fa un assemblaggio dell'id che hai inserito nella pagina insieme ad altro testo che ora non sto a spiegare... quindi il risultato sarà una cosa simile a questa:
ctl00_ctl00_idDelControlloContentPlaceHolder_tuoId

Jok83 Profilo | Junior Member

139 messaggi | Data Invio: sab 15 mag 2010 - 17:35

Ciao
mi sono spiegato male, la mia home è composta da 4 pulsanti posizionati sotto un'immagine (che deve variare al focus di ogni pulsante sotto), inoltre il pulsante quando riceve il focus si "ingrandisce", ora mentre per l'effetto della selezione (ingrandimento) avevo risolto come dicevi tu qui:
>onmouseover="this.src = 'percorso immagine';"
>onmouseout="this.src = 'percorso immagine2';"
assegnando le due immagini diverse.
ora il problema era cambiare l'immagine chiamiamola descrittiva sopra, e ti confermo che il problema è legato all' id in quanto provando come mi hai consigliato su una pagina priva di masterpage il tutto funziona...solo che dovrei tenerla...
Spero di aver chiarito in effetti rileggendomi non ci capivo granchè neppure io...
ora provo a recuperare gli id come mi hai spiegato, ti faccio sapere e intanto ti ringrazio per avermi dedicato del tempo..
Buon W-end

andrestu Profilo | Expert

772 messaggi | Data Invio: dom 16 mag 2010 - 09:38

ok ora ho capito.
Come altra soluzione riprendendo il codice sopra potresti usare un'espressione di binding:

<script type="text/javascript">
function img5_mouseOut() {
document.getElementById("<%= ImageButton5.ClientID %>").src = "Images/Button1.png";
document.getElementById("<%= Image2.ClientID %>").src = "Images/Button1.png"
}
function img5_mouseOver() {
document.getElementById("<%= ImageButton5.ClientID %>").src = "Images/Pulsante11.png";
document.getElementById("<%= Image2.ClientID %>").src = "Images/Button1.png"
}
</script>

In questo modo l'espressioni del tipo <%# ImageButton5.ClientID %> all'avvio della pagina vengono risolte inserendo quelli che saranno gli effettivi ID dei controlli, forse questa è una soluzione più "elegante", così non ti stai a sbattere a cercare gli id su client e poi hai il vantaggio di poter cambiare gli ID (se ne dovessi aver bisogno) dei controlli senza preoccuparti di doverli anche cambiare nel codice javascript.
L'unico obbligo è che il codice javascript devessere inserito nella pagina come hai fatto te e non in un file esterno.
Altrimenti altra soluzione si potrebbe anche creare codice Javascript dinamicamente e recuperare le proprietà ClientID dei vari controlli etc. etc... lasciamo perdere troppo lunga

PS: se alla fine riesci a risolvere puoi chiudermi la chiamata accettandomi la soluzione, grazie
Ciao e buon lavoro

Jok83 Profilo | Junior Member

139 messaggi | Data Invio: lun 17 mag 2010 - 10:06

Perfetto, ho appena provato e funziona perfettamente....
Non so come ringraziarti, davvero mi hai dato 3-4 soluzioni...
ciao e GRAZIE!!

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !