Problema "onmouseover".

LolliPoppingu

LolliPoppingu

Nuovo Utente
16 Nov 2012
15
0
1
Salve a tutti, sono nuovo del sito, ho visto che ci sono molte discussioni interessanti e mi sono appena registrato.
Approfittando di questo vi propongo un problema che mi assilla da qualche giorno.
In questo mio sito http://yoshitiamo.jimdo.com vorrei creare una sorta di "onmouseover".
In pratica io dovrei mettere un immagine, e cliccando o semplicemente andando con il mouse sopra un particolare dell'immagine si dovrebbe ingrandire, o comunque vorrei fare comparire almeno un testo (diciamo che mi interessa più il testo che l'ingrandimento).
Non credo si possa fare in html ma ho creato qui la discussione perchè non saprei dove metterla quindi mi scuso in anticipo se ho sbagliato.
Il problema è che nel mio sito non posso modificare il file body ecc. perchè fa un casino, posso solo aggiungere html ecc.
Quindi credo che l'unica soluzione sia farlo in flash, ma non ho idea di come fare.
Qualcuno ha una soluzione? :)
Grazie a tutti.
​
 
C

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Se ha un attimo di pazienza le posto uno script... lo devo ridurre altrimenti è enorme.... per tutti di dati che si porta dietro.... un attimo :)
 
C

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Un qualcosa del genere lei intende ??

HTML: 
<style type='text/css'>

            .immagin{
                width:90px;
                height:"auto";
                margin: -10px 0px;
                } 
</style>


<script type='text/javascript'>

function prendik() {

contn11 = '<img class="immagin" id="img1" src="immaginescelta.jpg"  onclick="grande(this.id);"   ondblclick="piccola(this.id);" title= "'nome immagine'"  alt="" />';
document.getElementById("immaga1).innerHTML = contn11; }

           function grande(img) { 
                var n = document.getElementsByTagName('img').length;           
                var elemento = document.getElementById(img);
                           
                    
                    if(img == "img1" ) {                     
                        elemento.style.width = 536 + "px";
                        elemento.style.height = "auto";
      }   
             }   


            function piccola(img) { 
                var n = document.getElementsByTagName('img').length; 
                var elemento = document.getElementById(img);
                                     
                    if(img == "img1" ) {                        
                        elemento.style.width = 90 + "px";
                        elemento.style.height = "auto";
                }
            } 

</script>

chiaramente non è completo.. sia chiaro...
Il testo lo può inserire in un div accanto alla foto o sotto... e lo fa comparire associando l'evento all'onclick... sull'immagine....
In questo caso appunto se si clicca sulla'immagine essa si ingrandisce...
 
Ultima modifica:
LolliPoppingu

LolliPoppingu

Nuovo Utente
16 Nov 2012
15
0
1
Nel mio sito devo mettere per forza questo codice nell'head, come posso fare per riportarlo in un punto del sito ?
Grazie ancora e mi scuso ma non sono ancora molto pratico.
 
darkjoker

darkjoker

Nuovo Utente
6 Nov 2012
19
0
0
darkjoker.host-ed.me
Ciao (lasciamo da parte le formalità, okay :D?)!
Quanto scritto da cavaliere123, anche se non necessariamente sbagliato (non l'ho nemmeno, provato, quindi non saprei) mi sembra un po' troppo per la risposta alla semplice domanda posta, quindi ecco un codice molto più breve che fa esattamente quanto richiesto:

HTML: 
<script>
function showText (mode) {
	document.getElementById('txt').style.display=mode;
}
</script>
<img src = 'https://www.google.com/images/srpr/logo3w.png' onMouseOver='showText("block");' onMouseOut='showText("none");'>
<span id = 'txt' style = 'display: none;'>Testo!</span>

Come puoi vedere, non è nulla di difficile: con l'evento onMouseOver la scritta viene resa visibile, l'evento onMouseOut, invece, la fa scomparire (in questo modo la scritta rimane visibile solo quando il puntatore si trova sull'immagine).

È anche possibile fare questa operazione utilizzando il flash, ma il tutto risulterebbe molto più brutto, lento e complicato (e l'effetto ottenuto sarebbe un po' diverso).. Ma, come si dice tra programmatori.... KISS! (Keep It Simple, Stupid!)

edit: leggendo quanto richiesto, devo rispondere dicendo che puoi includere tutto quanto nell'head e i browser dovrebbero mostrare tutto "normalmente" (almeno, su FF e chrome sembra che sia così) però andare contro gli standard non è mai una bella cosa, e potresti sempre trovarti qualche sorpresa (es. incompatibilità con qualche browser, o update di browser che prima funzionavano che in seguito non fungono più, ecc). Potrei sapere il motivo della necessità di mettere tutto tra i tag head?
 
Ultima modifica:
C

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Salve,,, allora io ho postato il codice per ingrandire e rimpicciolire una immagine con un click sopra... e te hai postato il codice per far comparire una scritta ..... in fondo abbiamo risposto a tutte e due le domande poste..... :)
 
LolliPoppingu

LolliPoppingu

Nuovo Utente
16 Nov 2012
15
0
1
Mh si questo di codice lo avevo già trovato sul web, solo che io avrei bisogno che il testo compaia solo quando si va su un particolare dell'immagine, e non sull'immagine in generale, ad esempio se ho il logo di google, e vado sulla O sotto mi deve apparire un testo, se vado sulla G un altro testo e così via, ma non credo si possa fare xD
(Grazie per il codice così semplificato comunque ne avevo trovati alcuni assurdi che facevano la stessa cosa).
 
darkjoker

darkjoker

Nuovo Utente
6 Nov 2012
19
0
0
darkjoker.host-ed.me
Aaah, in quel senso :D Chiedo scusa per non aver risposto alla domanda, ma avevo inteso una cosa diversa :D
Comunque, quello che chiedi è fattibile, ma in modo MOLTO complicato in javascript, e il risultato ottenuto creerebbe comunque probabilmente diversi problemi con alcuni browser: quello che mi viene in mente di fare, è il controllare, con il javascript, le coordinate del mouse e comportarsi di conseguenza.. Giusto un paio di giorni fa scrissi un articolo che, tra le altre cose, tocca anche il controllo delle coordinate del mouse.. Se può interessarti questo è il link).
In ogni caso, a meno che quanto devi fare non è proprio banale (es, controllare solo se il mouse passa su una porzione quadrata di una sola immagine situata in un angolo dello schermo), ti consiglio di lavorare con Flash...
Poi, magari, ci sono anche modi di fare il tutto in javascript, ma purtroppo non li conosco, quindi non so aiutarti.. Se però hai voglia, puoi guardarti come funzionano siti come http://www.subito.it/ , la cui mappa dell'italia fa quello che vuoi te :)
 
LolliPoppingu

LolliPoppingu

Nuovo Utente
16 Nov 2012
15
0
1
Grazie mille, si stavo già visionando il tuo blog prima xD
Quello che mi interessa è precisamente questo che mi hai linkato : http://www.subito.it/ , sarebbe perfetto per il mio scopo proprio così come è fatto in quel sito (ovviamente al posto dell'italia un'immagine xD)
Grazie comunque per tutto l'aiuto, vedrò se qualcuno sa altre cose o proverò a fare qualcosa in flash (sicuramente senza risultati xD)
Ciao ^^
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ciao,
puoi provare anche cosi
HTML: 
<script type="text/javascript">
    function showText (text,mode) {
        document.getElementById('txt').innerHTML=text;
        document.getElementById('txt').style.display=mode;
    }
</script>
<img  usemap='#img' src='/img/google.png' alt='google'/>
<map name='img'>
    <area id="g" shape='rect' 
          coords="168,18,208,92" 
          alt="g" target="g" href="#" 
          onclick="return false;" 
          onmouseover='showText("Sei passato sulla g piccola","block");' 
          onmouseout='showText("","none");' />
    <area id="G" shape='rect' 
          coords="3,2,69,81" 
          alt="G" target="G" href="#" 
          onclick="return false;" 
          onmouseover='showText("Sei passato sulla G grande","block");' 
          onmouseout='showText("","none");' />
</map>
<span id='txt' style = 'display: none;'></span>
ho fatto un esempio online prova a passare sulle 2 g di google

EDIT
le coordinate le ho recuperate con una funzionalita di gimp
 
Ultima modifica:
LolliPoppingu

LolliPoppingu

Nuovo Utente
16 Nov 2012
15
0
1
Perfetto era proprio quello che cercavo.
Solo che non so come fare e cosa modificare se devo mettere un'immagine qualsiasi, non una scritta.
Cioè se mi puoi spiegare cosa modificare ecc. mi aiuteresti molto :) (anche perchè ci ho provato ma non ci sono riuscito xD)

EDIT
Mi correggo sono riuscito a metterlo e a fare apparire le scritte, ora devo solo modificare le coordinate, speriamo di riuscirci =D
Comunque vi ringrazio tutti mi avete aiutato moltissimo e infine ho ottenuto esattamente quello che volevo :)
 
Ultima modifica:
LolliPoppingu

LolliPoppingu

Nuovo Utente
16 Nov 2012
15
0
1
Ok ci sono riuscito, è perfetto :)
Vorrei solo sapere se si può fare in modo che il testo appaia invece che sotto, direttamente sull'immagine in una sorta di piccola area di testo.
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
prova cosi
HTML: 
<div style="position: relative;">
            <img  usemap='#img' src='/img/google.png' alt='google'>
            <div id='txt' style="display: none;position: absolute; top: 10px; left: 10px;"></div>
        </div>
dovrai cmq lavorare sui css
 
darkjoker

darkjoker

Nuovo Utente
6 Nov 2012
19
0
0
darkjoker.host-ed.me
criric ha scritto:
ciao,
puoi provare anche cosi
HTML: 
<script type="text/javascript">
    function showText (text,mode) {
        document.getElementById('txt').innerHTML=text;
        document.getElementById('txt').style.display=mode;
    }
</script>
<img  usemap='#img' src='/img/google.png' alt='google'/>
<map name='img'>
    <area id="g" shape='rect' 
          coords="168,18,208,92" 
          alt="g" target="g" href="#" 
          onclick="return false;" 
          onmouseover='showText("Sei passato sulla g piccola","block");' 
          onmouseout='showText("","none");' />
    <area id="G" shape='rect' 
          coords="3,2,69,81" 
          alt="G" target="G" href="#" 
          onclick="return false;" 
          onmouseover='showText("Sei passato sulla G grande","block");' 
          onmouseout='showText("","none");' />
</map>
<span id='txt' style = 'display: none;'></span>
ho fatto un esempio online prova a passare sulle 2 g di google

EDIT
le coordinate le ho recuperate con una funzionalita di gimp
Clicca per allargare...
Ringrazio anche io per lo script che hai postato :) Non sapevo di questa possibilità, grazie ^^
 
LolliPoppingu

LolliPoppingu

Nuovo Utente
16 Nov 2012
15
0
1
Vorrei sapere un'ultima cosa poi non vi rompo più xD

Quello che vorrei io ora è praticamente quello che si trova su questo sito http://www.subito.it/
Cioè che andando su un certo punto dell'immagine si selezioni il testo a destra, oppure anche al contrario, cioè che andando sulla scritta mi fa vedere il punto preciso dell'immagine.
Ora posso lavorare anche in CSS :)
Grazie mille a tutti.
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
la situazione si complica un po
dipende anche da che immagine hai e che effetto vuoi sull'immagine
una cosa molto artigianale da rivedere e ottimizzare potrebbe essere questa
HTML: 
<html>
    <head>
        <title>Usemap</title>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
        <script type="text/javascript">
            function showText (text,mode,l,t) {
                var p = document.getElementsByTagName('p');
                for(var i =0; i <p.length;i++) {
                    p[i].style.border = "none"
                }
                if(text!="") {
                    document.getElementById('p' + text).style.border = "2px solid red";
                }
                if(mode=="none") {                     
                    document.getElementById('txt').style.display=mode;
                }else{
                    
                    document.getElementById('txt').style.display=mode;
                    document.getElementById('txt').innerHTML=text;
                    document.getElementById('txt').style.left = l + "px";
                    document.getElementById('txt').style.top = t + "px";
                }               
            }
        </script>
        <style type="text/css">
            p {
                padding:8px;
            }
        </style>
    </head>
    <body>
        <div style="width:100%">
            <div style="float:left;position: relative;">
                <img  usemap='#img' src='/img/BatmanRobin.png' alt='google'>
                <div id='txt' style="background-color: #FFF;border:2px solid red;display: none;position: absolute;">
                </div>
            </div>
            <map name='img'>
                <area id="batman" shape='rect' 
                      coords="187,2,306,225" 
                      alt="batman" target="batman" href="#" 
                      onclick="return false;" 
                      onmouseover='showText("Batman","block",187,2);' 
                      onmouseout='showText("","none",187,2);'>
                <area id="robin" shape='rect' 
                      coords="327,13,423,227" 
                      alt="robin" target="robin" href="#" 
                      onclick="return false;" 
                      onmouseover='showText("Robin","block",327,13);' 
                      onmouseout='showText("","none",327,13);'>
            </map>

            <div id="link" style="float:left;margin-left: 22px;">
                <p onmouseover='showText("Batman","block",187,2);' onmouseout='showText("","none",187,2);' id="pBatman">Bataman</p>
                <p onmouseover='showText("Robin","block",327,13);' onmouseout='showText("","none",327,13);' id="pRobin">Robin</p>
            </div>

        </div>
    </body>
</html>
non sono stato attento alla validazione
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
D Problema onmouseover Javascript 0
F Problema pulsante cerca record su access Database 0
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 1
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6

Discussioni simili

Alto Basso