Guillemets et apostrophes alternés

Bonjour,

je revois actuellement du code pour ajouter une fonctionnalité et j'aurais un problème vis à vis du code d'un bouton qui est censé changer d'image quand je passe dessus ou quand je clique dessus. Le problème c'est qu'il ne le fait pas, j'ai repris la syntaxe de l'ancien code qui mettait tout le html dans une string pour le retourner en sortie et je crois que j'ai un problème sur les guillemets apostrophe.

$html .= '<input type="radio" id="etoileRadio1" title="'.JText::sprintf('PLG_VOTE_VOTE', '1').'" name="user_rating" value="1" />';

$html .= ' <label for="etoileRadio1"><img src="/images/etoileOFF.png" id="etoile1" onmouseover="javascript:affiche(1)" onmouseout="javascript:effacer()" onclick="javascript:affiche(1)"/></label>';


le problème vient du affiche et du effacer, si j'enleve "javascript:" ça ne change rien , si j'ecris comme le JText "'.affiche(1).'" ça ne change rien non plus
Dans le cas où j'ai ecris j'ai vraiment l'impression qu'il prend l'affiche et le effacer comme une chaine

Merci d'avance.

Notes : dans un css j'ai demandé à faire disparaitre les boutons radio, seul reste les images cliquable , en fait c'est pour un système de vote avec des étoiles et je ne peux pas enlever le type "input type="radio" "

Code du css et du javascript

$html.= '<STYLE type="text/css">
label {
display: inline-block;
cursor: pointer;
position: relative;

}
input[type=radio]{
display : none;
}
label:before {
content: "";
display: inline-block;
}
</STYLE>';

$html.='<script language="JavaScript" type="text/javascript">
function affiche(etoile)
{
if(etoile == 1)
{
//récupère la src des étoiles à afficher / cacher
this.getElementById("etoile2").src="/images/etoileOFF.png";
this.getElementById("etoile3").src="/images/etoileOFF.png";
this.getElementById("etoile4").src="/images/etoileOFF.png";

this.getElementById("etoile1").src="/images/etoileON.png";
}

else if(etoile == 2)
{
this.getElementById("etoile3").src="/images/etoileOFF.jpg";
this.getElementById("etoile4").src="/images/etoileOFF.png";

this.getElementById("etoile1").src="/images/etoileON.png";
this.getElementById("etoile2").src="/images/etoileON.png";
}

else if(etoile == 3)
{
this.getElementById("etoile4").src="/images/etoileOFF.png";

this.getElementById("etoile1").src="/images/etoileON.png";
this.getElementById("etoile2").src="/images/etoileON.png";
this.getElementById("etoile3").src="/images/etoileON.png";
}

else if(etoile == 4)
{
this.getElementById("etoile1").src="/images/etoileON.png";
this.getElementById("etoile2").src="/images/etoileON.png";
this.getElementById("etoile3").src="/images/etoileON.png";
this.getElementById("etoile4").src="/images/etoileON.png";
}
}
function effacer()
{
this.getElementById("etoile1").src="/images/etoileOFF.png";
this.getElementById("etoile2").src="/images/etoileOFF.png";
this.getElementById("etoile3").src="/images/etoileOFF.png";
this.getElementById("etoile4").src="/images/etoileOFF.png";
}
</script>';