Codice css per cambiare in automatico le immagini a seconda del titolo

marcosquall

Codice css per cambiare in automatico le immagini a seconda del titolo

Buongiorno a tutti,
come da oggetto avrei bisogno di una mano da qualche esperto per creare un codice che in pratica modifichi l'immagine di intestazione a seconda del titolo.

La classe match-team-1-blason contiene la "squadra1" in basso per tutte le squadre esce un'immagine standard e generica dal nome scudetto-home.png, stessa cosa per match-team-2-blason che invece inserisce l'immagine scudetto-away.png

Vado al dunque io vorrei che a seconda del titolo della squadra (che cambia in automatico match-team-name team-1 e match-team-name team-2) l'immagine cambi e quindi inserisse il logo della squadra.

Ho pensato di creare una cartella con tutti i .png delle squadre nominate in modo che coincidano con la classe sopracitata però ho difficoltà nel creare il codice, ho pensato di scrivervi chissà un'anima gentile mi aiuta

Grazie mille in anticipo

flaviors200

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

marcosquall

$titolo diventa match-team-name team-1?

marcosquall

Scusa dimenticavo che le modifiche che posso fare risiedono su un file .css, inserendo il tuo codice in DW mi segnala errori

marcosquall

Nessuno mi aiuta?

flaviors200

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

marcosquall

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à.:)

flaviors200

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.

marcosquall

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"

in modo che mi esca <img src="cartellaremota/png/Lazio.png">

Spero di ricevere una mano

marcosquall

Mi aiuta qualcuno?

marcosquall

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 png

Dopodiché 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

flaviors200

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.

marcosquall

Grazie della risposta!
Purtroppo non gestisco tutto io..
Cercavo un codice più automatico più simile a quello da me postato..