- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Codice css per cambiare in automatico le immagini a seconda del titolo
-
Ciao,
dando per scontato che stai usando PHP come linguaggio lato server, potresti fare così
[PHP]
<?php// Recuperi il titolo dal database (o altra fonte) e lo salvi nella variabile $titolo
switch ($titolo) {
case 'titolo1':
$src = 'percorso-immagini/logo-squadra-1.png';
break;
case 'titolo2':
$src = 'percorso-immagini/logo-squadra-2.png';
break;
case 'titolo3':
$src = 'percorso-immagini/logo-squadra-3.png';
break;
default:
$src = 'percorso-immagini/logo-di-default.png';
break;
}
[/PHP]Una volta che hai la variabile $src, la utilizzi come con il tag <img> per visualizzare il logo
[PHP]
<img src="<?php echo $src;?>" alt="">
[/PHP]Altro metodo forse migliore: nella tabella del database dove salvi i titoli associ a ciascun titolo il logo.
Spero di aver capito bene cosa vuoi fare, anche perchè hai postato nella sezione CSS, ma non mi sembra un problema che riguardi lo stile
-
$titolo diventa match-team-name team-1?
-
Scusa dimenticavo che le modifiche che posso fare risiedono su un file .css, inserendo il tuo codice in DW mi segnala errori
-
Nessuno mi aiuta?
-
Ciao,
ma usi PHP o solo HTML e CSS? E i titoli da dove vengono prelevati, da un database?
Il codice che ti ho postato è PHP, ora non ricordo se Dreamviewer si può configurare per interpretare file .php
-
Ciao uso un foglio di adeguamento css i titoli sono ricavati da match-team-name team-1 e match-team-name team-2 che sarebbero la squadra 1 e la squadra 2.
Grazie della disponibilità.:)
-
Scusa ma "match-team-name team1" sarebbe il nome della classe nel codice HTML? Intendo questo <div class="match-team-name team1"></div>
Nel primo post dici che il titolo della squadra "cambia in automatico", in che senso? Mi pare di aver capito che non è una pagina dinamica, cioè con codice PHP, ma solo HTML e CSS.
-
Allora mi spiego meglio, ho un foglio di adeguamento css che sovrascrive delle classi esistenti perchè non posso avere accesso alla root principale quindi posso regolarmi solo su questo ed altri pochissimi file.
Io ho questa classe "match-team-name team-1" che corrisponde ad esempio alla squadra del lazio e così dicendo anche per la classe "match-team-name team-2".Se io carico i loghi in png in una cartella remota posso far si che per richiamare l'immagine corrispondente posso fare così? sicuramente sbaglio ma è l'unico modo per far capire a tutti:
Caso che match-team-name team-1 sia uguale al "Lazio"
<div class="match-team-1-blason">
<img src="cartellaremota/png/ & "match-team-name team-1" & ."png">
</div>in modo che mi esca <img src="cartellaremota/png/Lazio.png">
Spero di ricevere una mano
-
Mi aiuta qualcuno?
-
Ciao a tutti a distanza di un po di tempo sono riuscito a trovare una soluzione ma parziale perchè ho bisogno del vostro aiuto che spero arrivi.
Sul mio sito alcuni titoli di squadre cambiano in automatico ma adesso c'è un'icona generica, vorrei cambiare l'immagine a seconda del titolo della mia classe.
Ho trovato questo codice interessante ma ho provato ad implementarlo ma non cambia l'immagine, forse sbaglio qualcosa.
Ecco il codice:var link = document.getElementsByClassName("match-team-name team-1")[0].textContent;
var imageurl = "<img src="mio-url/";
var suffix = ".png">"
document.getElementById("hotbet-blason-home").innerHTML = imageurl + link + suffix;match-team-name team-1 è il titolo che cambia dinamicamente
hotbet-blason-home questa invece è la classe dove risiede l'icona in pngDopodiché ho inserito nel file html della pagina il richiamo allo script: <script type="text/javascript" src="miourl/js/match.js"></script>
Adesso come dovrei procedere perchè facendo così ancora non ho ottenuto il risultato.
Grazie in anticipo
-
Ciao,
ho visto il codice sorgente ed è un gran casino, come fai a mantenere una roba del genere... :():
Comunque dato che c'è incluso JQuery, potresti provare con questo codice
[HTML]
$('#squadra').css('background-image', 'url("link-immagine.jpg")');
[/HTML]al posto di "squadra" metti il nome della squadra (es. torino, atalanta) mentre link-immagine.jpg è l'immagine che usi per lo sfondo.
Nell'HTML, per ciascun div che mostra l'immagine di sfondo dovrai mettere id="squadra", dove al solito "squadra" è nome della squadra (es. id="torino").
Metti una riga di codice per ciascuna squadra.
-
Grazie della risposta!
Purtroppo non gestisco tutto io..
Cercavo un codice più automatico più simile a quello da me postato..