onmouseover/onmouseout cu imagini in baza de date

[silviu60]

Salutare de 2 zile incerc sa fac un link dinamic cu o imagine hover care se afla in baza de date. Am reusit sa fac ca imaginea sa se faca hover doar cand sunt cu mousul pe imagine dar cand sunt cu mousul pe text imaginea ramane la fel. sunt la capitolul incercari de tot felul

o portiune de cod arata cam asa :

intr-un fisier numit 'function'

function getCats(){

global $con;
$get_cats="SELECT * FROM categories";

$run_cats= mysqli_query($con, $get_cats);

while ($row_cats=mysqli_fetch_array($run_cats)) {

$cat_id =$row_cats['cat_id'];
$cat_title = $row_cats['cat_title'];
$cat_img = $row_cats['cat_img']; // imagine normala in baza de date
$cat_imgh = $row_cats['cat_imgh']; // imagine hover in baza de date

echo "<li><a href = 'index.php?cat=$cat_id' ><img class ='img' src='$cat_img' onmouseover=this.src='$cat_imgh' onmouseout=this.src='$cat_img' >$cat_title</img></a></li>";



Va multumesc pentru timpul accordat .

[MarPlo]

Salut
Incearca asa:

Cod: Selectaţi tot

echo "<li><a href='index.php?cat=$cat_id'><img class='img' src='$cat_img' onmouseover=\"this.src='$cat_imgh'\" onmouseout=\"this.src='$cat_img'\" />$cat_title</a></li>"; 

Verifica in sursa paginii codul html rezultat de acel cod php. Asa poti vedea unde ar fi problema.
Vezi si in consola (F12) sa nu fie erori javascript.

[silviu60]

Multumesc pentru raspuns, .. dar nimic nu s-a schimbat, am verificat si consola si nu am nici o erroare.

[MarPlo]

Poate nu am inteles bine. Acum cred ca vrei ca imaginea sa ramana pe starea "hover" si cand cursorul e pe text-ul link-ului.
Daca e asa, se adaga over /hover la link, cu actiune pe imaginea din el; adauga acest cod JS in pagina html:

Cod: Selectaţi tot

<script>
function hoverLinkImg(elm, src){
  elm.querySelector('img').src = src;
}
</script>

Iar in php sa ai asa:

Cod: Selectaţi tot

echo "<li><a href='index.php?cat=$cat_id' onmouseover=\"hoverLinkImg(this, '$cat_imgh')\" onmouseout=\"hoverLinkImg(this, '$cat_img')\"><img class='img' src='$cat_img' />$cat_title</a></li>"; 

[silviu60]

) da acum merge corect gresisem o litera in script ... Multam frumos pentru ajutor

[vectorialpx]

Iti recomand varianta cu CSS: background image + schimbare la hover