Immagine richiamata con HTML responsive 
Autor: Francesco Tedeschi
Visitado 1362,
Seguidores 5,
Compartilhado 0
Buonasera,
questa immagine
inserita sul sito http://www.provadistinti.altervista.org/provafullscreen/
richiamata dal tag A:
<a id="F11" href="javascript:void(0)" style="position:fixed;top:50%;margin-top:-205px;left:50%;margin-left:-205px" onClick="go_full_screen();full_screenK()" alt="FullScreen" title="FullScreen"><img src="http://www.provadistinti.altervista.org/1/images/msg.png" width="100%" /></a>
è possibile renderla responsive ??
Quando visualizzo il sito web da smartphone, l'immagine mi compare tagliata, so che potrei magari farla più piccola, ma chiedo se c'è un comando che la renda responsive... grazie
Publicado em
Prova ad inserire anche l'altezza dell'immagine height="409" ho provato sul mio sito prova e funziona solo che devi rivedere le posizioni, per ll mio sito sono queste:
<a id="F11" href="javascript:void(0)" style="position:fixed;top:50%;margin-top:-200px;left:50%;margin-left:-180px" onClick="go_full_screen();full_screenK()" alt="FullScreen" title="FullScreen"><img src="http://www.provadistinti.altervista.org/1/images/msg.png" width="100%" height="409"/></a>
Secondo w3schools bisognerebbe scrivere
max-width: 100%; height: auto;
https://www.w3schools.com/css/css_rwd_images.asp
Autor
Quindi
<a id="F11" href="javascript:void(0)" style="position:fixed;top:50%;margin-top:-200px;left:50%;margin-left:-180px" onClick="go_full_screen();full_screenK()" alt="FullScreen" title="FullScreen"><img src="http://www.provadistinti.altervista.org/1/images/msg.png" max-width="100%"height="auto"/></a>
?
è corretto ?
Autor
ok, provato e va benissimo.
Grazie
Però se usi valori percentuali l'immagine scala nel momento in cui la sua width diventa maggiore della width della finestra e di conseguenza ti occuperà tutta la larghezza della finestra. Se vuoi un controllo migliore sulle sue dimensioni, secondo la mia opinione, è meglio assegnare le dimensioni volute per ogni breakpoint usando le @media queries.
... se il LINK è sempre quello del primo post, non mi pare né responsive e né elastico...
.
Oltretutto non si può obbligare l'utente a navigare per forza in fullscreen. Il popup di richiesta dovrebbe anche poter essere chiuso!
Autor
Ciao Kolasim, il link è sempre quello di inizio topic, ho solo cambiato l'immagine.
Siccome da smartphone si adattava e fa PC anche, credevo che andava bene il codice impostato così come ha suggerito Esse Di per rendere responsive l'immagine.
@Gabriele, non è un vero e proprio popup, è un immagine e non credo possa essere chiusa perché ho inserito del codice esterno x richiamarla
Hai inserito un'immagine di 1600x1200 pixel, dimensioni che vanno bene per qualsiasi risoluzione.
Che cosa c'entra il responsive?
E' sufficiente il codice di Kolasim da te menzionato nel post di apertura, adeguando, ovviamente, i margini alle nuove dimensioni
In questa post dell'altro tuo topic
https://helpcenter.websitex5.com/pt/post/229472#comment22
ti è stato chiaramente indicato che i margini top e left devono essere la metà delle dimensioni dell'immagine
... mi riferivo al responsive in Oggetto della Domanda, in quanto l'immagine la vedo di misure fisse, ma per quello per me sta anche bene così...
...!... se invece è vero che ti interessava una certa elasticità reattiva e/o adattamento alla finestra, fammelo sapere, che cercherò di rispolverare una delle mie prime invenzioni...!...
...!... visto che è stata nominata la (X) per la navigazione ordinaria, penso che si potrebbe usare il Messaggio Pubblicitario, o lo ShowBox, o di sicuro il mio storico metodo con il DIV_CUTOM...!...
.
ciao
.
Autor
quell'immagine che vedi viene richiamata dal "tag A" (questione dei gg scorsi per simulare F11)
Se si può ottenere la simulazione F11 all' interno di un messaggio pubblicitario, a me farebbe molto comodo perchè il msg pubblicirtario si può chiudere con la X.....
Autor
e oltretutto, il messaggio pubblicitario è automaticamente responsive....
... pubblica l'esempio con il messaggio pubblicitario, e poi vedremo se si può fare qualcosa... .. . .
... intanto per la (X) ...sulla pagina attuale prova questo mio codice estratto dal mio div_custom:
<script> $( document ).ready(function() {
divK='<div id="K" style="position:fixed;widthX:100px;heightX:100px;top:50%;margin-top:-130px;left:50%;margin-left:100px;backgroundX:yellow;z-index:100000000"><a href="javascript:void(0)" onclick="$(\'#F11\').hide(); $(\'#K\').hide(); " > <img src="https://img.icons8.com/cotton/2x/cancel.png" width="50" alt="No! Navigazione Normale!" title=" No!\nNavigazione\n Normale!" > </a></div>';
$("body").append(divK);}); </script>
.
.
Autor
funziona ed è bello Kolasim, c'è un piccolo problema, se si clicca sul tasto CLICCA QUI, rimane solo la X.
Il messaggio pubblicitario l'ho inserito
... intanto, per quel che hai segnalato, ...in Firefox o in Chrome aziona Ctrl+U e vedrai il codice sorgente...
... al rigo 264, là dove vedi:
function full_screenK(){$('#F11').hide();}
... sostituisci con:
function full_screenK(){$('#F11').hide(); $('#K').hide();}
... al rigo 271, là dove vedi:
$('#F11').show(); }}
... sostituisci con:
$('#F11').show(); $('#K').show(); }}
.
... applica queste modifiche al tuo codice...
.
... al posto delle istruzioni precedenti, con il solo messaggio pubblicitario; ... modifiche:
1) - elimina il TAG <A> ;
2) - il precedente rigo 264, diventa così:
function full_screenK(){$("#splashbox-advcorner").hide();}
3) - il precedente 271, diventa così::
$("#splashbox-advcorner").show(); }}
4) - aggiungi questo SCRIPT:
<script>
$( document ).ready(function() {
divK='<a href="javascript:void(0)" onclick="go_full_screen();full_screenK();chiudi();" > <img width="100%" src="http://www.provadistinti.altervista.org/provafullscreen/images/MSGPUBB_0a68dmb6.png" alt="passa in FullScreen" title="passa in FullScreen" > </a>';
$("#splashbox-advcorner > div:nth-child(2)").html(divK);});
</script>
.
bye
...!... ==============EDIT>>>>>>>>>>
... ho svincolato lo SCRIPT del .4) dalla immagine, così puoi usare sempre quella del programma, e quindi il codice SCRIPT corretto diventa questo:
<script>
$( document ).ready(function() {
divK='<a style="display:block" href="javascript:void(0)" onClick="go_full_screen();full_screenK()" alt="FullScreen" title="FullScreen" > <div id="k" style="position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:white;opacity:0.0"></div></a>';
$(".imClose").before(divK);;
</script>
.
.
... visto che ho visto nella Guida che al messaggio pubblicitario si può assegnare il collegamento, allora diventerebbe ancora più semplice...
... selezionare il collegamento con l'opzione File o URL | File su Internet, digitando o meglio, incollando quanto in grassetto:
void(0)" onclick="go_full_screen(); full_screenK();
... esattamente così come lo si vede, con gli apici (") asimmetrici...
... pertanto rispetto al codice sorgente che vedo attualmente le modifiche da fare sarebbero:
1) - eliminare il TAG <A> ;
2) - nello SCRIPT della funzione function go_full_screen() ...sostituire la riga nr.264 con questa stringa:
function full_screenK(){$("#splashbox-advcorner").hide();}
3) - nella stessa funzione cui precedente .2) ...sostituire la riga nr.271 con questa stringa:
$("#splashbox-advcorner").show(); }}
...
... in teoria salvo dimenticanze/errori il tutto potrebbe funzionare; da verificare in rete...
.
Autor
Perfetto Kolasim, appena sono a casa provo e ti faccio sapere.
Autor
Ciao Kolasim, allora, http://www.provadistinti.altervista.org/provafullscreen
questo fatto, ho eliminato anche il tag A.
queste 2 variazioni le ho fatte attraverso il programma, non so come modificare il codice attraverso mozzilla, ho visto su mozzilla la riga 264 o 271 ma nn ho trovato lo script a cui ti riferivi e tra l'altro anche se le trovavo non so come apportare modifiche al codice
comunque, verifica che le sostituzioni ai righi 264 e 271 siano state fatte bene....
Ho esportato il sito su internet..... ma c'è un errore, a inizio di questo topic ho reinserito il link al sito.
1) ... sostituisci lo SCRIPT con quello in allegato... ↓↓↓ ... (avvisa per controllare)
2) ... assegna al messaggio pubblicitario il collegameto nel modo detto prima:
void(0)" onclick="go_full_screen(); full_screenK();
.
[OT] ... per mia curiosità, fammi sapere se da programma è possibile inserire messaggi pubblicitari diversi in altre pagine...
.
Autor
ok, lo script l'ho sostituito,
ho assegnato al messaggio pubblicitario il collegamento che mi hai dato.
Ho messo tutto in rete
Quando si clicca sul msg pubblicitario, c'è ancora un errore, il collegamento assegnato al msg pubblicitario da problemi...
Da programma posso scegliere in quali pagine il messaggio pubblicitario deve essere mostrato, al momento è visibile solo in home page ma potrei renderlo visibile (ad esempio) solo nella pagina contatti oppure in tutte la pagine.
Non è possibile mostrare messaggi diversi in altre pagine.
... grazie, ...è proprio questo che hai detto che mi interessava...
Autor
... infatti, ho provato adesso, ...mmm...
...
... hai uno STAMP di come si presenta la finestra per il collegamento, in modo da potermi regolare...?...
Autor
Ti ho fatto un video, se serve altro dimmelo
https://we.tl/t-5UtSZyX55D
...!...
scusmi, ... colpa mia!...
...mi sono mangiato una stringa del codice...
... vado a ricontrollare, e ti dirò...
.
... il video è NERO, (forse codec non adatto) ... ma con l'audio forse ho capito lo stesso...
... tra poco ti farò sapere; ...forse ci siamo...
.
Autor
OK
Autor
https://youtu.be/ei-_0f_oal4
ho messo il video su YT così puoi vederlo
... sì, ...vedendo il video, pare che hai fatto tutto correttamente...+
.. purtroppo però non riesco a capire perchè da programma non prenda il collegamento con evento regolare; ...senza del programma non posso approfondire...
... allora tagliamo la testa al toro, ...facciamo un passo indietro e torniamo al div_customK...
... quindi:
.1) .. elimina il collegamento che hai messo al messaggio pubblicitario;
2) ... sostituisci tutto lo SCRIPT con quello in ALLEGATO, (sperando ci non aver tralasciato qualcosa)!...
... fammi sapere quando avrai fatto...
...
...
... poi, se per caso vuoi anche applicare un semplice effetto al passaggio del mouse, allora prima della chiusura di /HEAD incolla questo codice:
<style> #k:hover {opacity:0.2 !important} </style>
.
Autor
ho fatto. Sembra che non succeda nulla al clic sul msg pubblicitario.... ma devo reinserire il tag A?
... no!.. il tag A è già nel div_custom dinamico...
... purtroppo nella mia tastiera manca la "a" che devo metterla con copia/incolla...
! ... >> opcity >> opacity
<style> #k:hover {opacity:0.2 !important} </style>
........................
... per il resto, potrebbe dipendere dal fatto che il codice si attivi prima della apparizione del messaggio pubblicitario, rimanendo inerte...
... nello SCRIPT qui in allegato ho aggiunto un ritardo di 3 secondi (3000 m), quindi sostituisci tutto il precedente codice con questo... prova ed avvisa ... ...↓↓↓...
.
Autor
waooooo grazieee
sei un grandeee va benissimo
http://www.provadistinti.altervista.org/provafullscreen/
OT: ho bisogno di comunicarti una cosa... mi lasci la tua email x favore ?
... ottimo! ...
... correggi in style opacity con la "a" ...che adesso manca...
... eventualmente aumenta il tempo di un secondo, da > 3000 a > 4000
... per e-mail tieni presente che ho un connessione difficoltosa, ed il PC obsoleto...
>> kolasim(At)hotmail.com ... (At) = @
.
... adesso chiudo, ed eventualmente a domani, ciao
.
...
... visto che le hai provate tutte, ti chiederei di fare questa ultima prova con lo SCRIPT qui allegato "fullscreenK2.txt ", ed assegnando al messaggio pubblicitario questo collegamento, (diverso dal precedente):
javascript:void(0)" onclick="go_full_screen(); full_screenK();
... oppure e/o anche, provare con questo:
#" onclick="go_full_screen(); full_screenK();
... se funzionasse, sarebbe da preferire al metodo con div_custom ritardato di 3 sec. ...
... grazie per la prova, e se puoi fai sapere ... ciao...
.
Autor
Allora Kolasim,
ho inserito l'ultimo script
ho assegnato prima i il collegamento al messaggio pubblicitario, entrambi i collegamenti sembrano non funzionare, al clic non succede nulla.
Al momento è presente questo collegamento
#" onclick="go_full_screen(); full_screenK();
scrivimi per ulteriori prove
... grazie per il test; ...hai fatto correttamente, ma il risultato non è quello previsto, mi dispiace molto...
... torna pure alla precedente soluzione...
... quando avrò nuovamente il programma vedrò di ricordarmi di questo Topic, e nel caso ti avviserò...
... i tuoi test mi sono stati utilissimi...
... ci rivedremo nel caso in altri Topic...
.
ciao
.