Zmiana obrazku po najechaniu myszką na stronie np. "O nas"

[Fre3x]

Witam,

Zastanawia mnie czy tworząc stronę w CMS, np. "O nas" istnieje możliwość wstawienia w kodzie źródłowym odpowiedniego kodu, który sprawiłby, by po najechaniu myszką na np. szary obrazek zrobił się kolorowy.

Próbowałem to uczynić takim kodem:

<img src="beznajechania.jpg" name="obraz" onmouseover=obraz.src="znajechaniem.jpg" onmouseout=obraz.src="beznajechania.jpg">

Jednak gdy wprowadzam go pojawia mi się wyłącznie szary obraz, a najechanie na niego niczym nie skutkuje.

Tworząc szablon na allegro, skorzystałem z css oraz div'ów i tam mi się to udało. W Prestashopie raczej w zawartości strony nie uda mi się tego sposobu wykorzystać. Ma może ktoś jakiś pomysł jak to zrobić?
 

[selljus.pl]

Podany sposób jest mało praktyczny. 

Tutaj można zaczerpnąć wiedzy:

http://blog.robertmatuszewski.pl/hover-effect-w-css-jquery/

[Fre3x]

Przeczytałem, ale jednak zdecydowałem się to zrobić w css i w divach. W globalu dodałem taki kodzik:

div#fotografia {
background-image: url("adres_obrazka");
background-repeat: no-repeat;
width: 190px;
height: 165px;
float:left;
}
div#fotografia:hover {
background-image: url("adres_drugiego_obrazka");
background-repeat: no-repeat;
width: 190px;
height: 165px;
float:left;
}

Dodałem diva w tinyMCE i super, jest obrazek, najadę myszką, zmienia kolor, ale jest jeden mały, a istotny dla mnie problem. W momencie gdy chcę dopisać do obrazka odnośnik w tinyMCE wpisuje taki kodzik i go zapisuje:

<a href="..."><div id="..."></div></a>

Mój obrazek znika na stronie, jak w kodzie źródłowym tinyMCE. Wie ktoś o co chodzi i jak temu zapobiec?

 

Próbowałem, <a href> wrzucić pomiędzy divy, efekt identyczny jak przed

Edited April 10, 2015 by Fre3x (see edit history)

[Yabber]

TinyMCE to wynalazek dla użytkowników znających tylko worda, do edycji kodu wogóle się nie nadaje.

No chyba że go odśmiecisz z wszelkiej maści wspomagaczy i walidatorów.

[design4VIP]

Przeczytałem, ale jednak zdecydowałem się to zrobić w css i w divach. W globalu dodałem taki kodzik:

div#fotografia {
background-image: url("adres_obrazka");
background-repeat: no-repeat;
width: 190px;
height: 165px;
float:left;
}
div#fotografia:hover {
background-image: url("adres_drugiego_obrazka");
background-repeat: no-repeat;
width: 190px;
height: 165px;
float:left;
}

Dodałem diva w tinyMCE i super, jest obrazek, najadę myszką, zmienia kolor, ale jest jeden mały, a istotny dla mnie problem. W momencie gdy chcę dopisać do obrazka odnośnik w tinyMCE wpisuje taki kodzik i go zapisuje:

<a href="..."><div id="..."></div></a>

Mój obrazek znika na stronie, jak w kodzie źródłowym tinyMCE. Wie ktoś o co chodzi i jak temu zapobiec?

 

Próbowałem, <a href> wrzucić pomiędzy divy, efekt identyczny jak przed

co do samego css to jeszcze skorzystalbym z dobrodziejstwa -moz i zrobil plynne przejscie tych obrazkow (tutaj jedna przeszkoda, trzeba wprowadzic kody dla roznych przegladarek, ale tego w necie wiele.

 

co do linka... @Yabber ma jak najbardziej racje. nei wszystko przy tiny da sie osiagnac. dwa, nawet odchudzajac tiny i tak mamy wiele pozniejszych ograniczej i validacji po samej storni presta przy wysweitleniu tego co wysyla tiny. tutaj oczywiscie tez nie zostajesz bez szans na sukces z pomoca przyjdzie obsluga przycisku przez skrypt, ten oczywiscie, jak i style musialby pociagnac z zewnetrznego pliku. jakos glowny, w zaleznosci od szablonu np. js/global.js i w nim urzyc $('#fotografia').click(function(){tutaj header linka; czy inne});