Inserire forme a comparsa su immagine 
Autore: Alberto B.
Visite 1036,
Followers 1,
Condiviso 0
Salve
Qualcuno sa suggerirmi se si può aggiugere del codice per creare delle forme (rettangolari, ovali ecc) per evidenziare un'area su una immagine ? nell'esempio dell'immagine che segue l'effetto finale è passare con il mouse (senza cliccare) sopra un'area e far comparire un cerchio o un rettangolo su un dettaglio dell'immagine
Postato il
... solo a titolo di idea per allargarti la prospettiva, ...il resto dipenderà da te...
... questione di gestione EXTRA Programma e di storica mappatura immagini...
... è semplice se si conosce l'argomento, ma difficile da spiegare qui...
... magari hai già qualche programma per farlo nel tuo PC, ma devi conoscerli bene...
... ci sono svariati metodi (html, css, svg, js, ecc.), più o meno amichevoli in base alla preprazione...
... un ricerca in rete sarebbe da fare e potresti trovare quel che fa per te...
... personalmente preferivo SwishMax (defunto!), oppure attualmente ed in preferenza (da15 anni) senz'altro in SVG...
... tanti hanno usato WebAnimator, elementare sempre se si conosce bene...
... per la mappatura storica in html, va bene qualsiasi metodo, e per me basterebbe aggiungere in EXTRA alle aree sensibili gli eventi-funzione JS onmouseover() - onmouseout(), accoppiando le funzioni JS per vedere o non vedere (div_sino) i DIV_CUSTOM EXTRA da creare in CSS per le cornici...
.
ciao
.
Oppure da programma senza alcun codice:
Ovviamente ti prepari 2 immagini tu...la prima solo testo, la seconda con testo e cerchio...
.. ciao Mirko, è più semplice di quel che possa sembrare(*), e menomale che tu avevi salvato i due esempi
:
http://provews.altervista.org/bussola/index.html
... (*) ... ed ancora di più...
.
Autore
Grazie a tutti dei consigli
Penso che userò web animator (che ho da tempo), creando un pulsante con lo sfondo trasparente ed il bordo colorato, purtroppo sarà solo rettangolare... ma pazienza
appena riesco a farlo lo pubblico
... non conosco Web Animator, ...ma penso che non dovrebbero esserci problemi con le forme; ... eventualmente chiedi nel loro Forum...
... comunque tutto dipende da quello che realmente vorresti ottenere, .. magari potrebbero bastare dei semplici DIV_CUSTOM posizionati ad hoc come in uno degli esempi esposti prima; ...e con css "border-radius" otterresti cerchi ed ovali a piacimento...
... anche in SVG, se lo conosci, sarebbe molto semplice; ...in allegato un mio vecchio esempio unico (elastico/responsive) che ha fatto scuola; ...capirai da te...
... te lo potrai studiare con un qualsiasi editor di file SVG...
.
Ciao, se ho ben capito cosa vuoi ottenere, considera che c'è anche l'Oggetto Hover Button (a pagamento però) che ti permette di far apparire forme rettangolari e ovali su testi cliccabili e personalizzabili. Un esempio qui (per l'esempio 02 ho usato una semplicissima riga di codice applicata a quell'Hover Button per ottenere l'ovale, senza la riga di codice l'ovale è quello dell'esempio 04):
https://www.test70.altervista.org/pulsanti/
Ciao
Autore
Ciao Giuseppe e Mirko
Ho visto i vostri esempi, ma la mia esigenza è far comparire più contorni su una immagine unica, e non suddiviso per ogni oggetto.
ho provato a fare una prova con Animator, purtroppo mi rimangono i contorni bianchi e se li metto trasparenti non funziona nulla... dovrò adattarli per ogni immagine
qui l'esempio: provacontorno
Autore
Dimenticavo...
L'esempio che più si avvicina è quello di KOL fiore_k1.zip
... il tuo LINK mi sembra essere venuto bene e per di più è responsive...
... cosa vorresti ottenere di diverso...?... ... ... magari potrebbero venire altre idee...
... intanto di faccio vedere questi miei vecchi ed originali esempi in allegato...
.
Autore
OK con i tuoi esempi mi avvicino sempre di più al risultato, sto cercando un editor SVG semplice e vedo se riesco ad applicarlo alla mia immagine.
... se hai Inkscape, con cui li avevo realizzati, i miei SVG si avvieranno direttamente per essere editati...
... il fiore è quello che generalmente invio a tutti per studiare le interazioni...
.
Autore
Ok stavo testando appunto quell'applicazione, ora proverò usare il file del fiore per capire meglio
... potrebbe venirti qualche idea...
... ↓ ...