Rollover z wywołaniem obrazka

**Posty:** 619 · przez **Pawel_x18** 09 Sie 2010, 11:24

Witam serdecznie,
chciałbym prosić o pomoc przy stworzeniu kodu, który wywoła obrazek.

Mamy tak:

[ OBRAZEK 1 ] [ OBRAZEK 2 ] [ OBRAZEK 3 ]

[
[
[ TAKI EKRAN WYWOŁANIA INNYCH OBRAZKÓW W ZALEŻNOŚCI NA NAJECHANIE MYSZKĄ NA OBRAZEK
[
[

Po najechaniu na myszką np. na "obrazek 1"

poniżej pojawia się inny, lecz po najechaniu na "obrazek 2" w tym samym miejscu pojawia się inny

Taki efekt można zaobserwować na stronie apteki domzdrowia.pl tam gdzie jest gazetka promocyjna

Bardzo proszę o pomoc.

**Posty:** 21 · przez **matx132** 10 Sie 2010, 23:20

a więc tak można to zrobić na kilka sposobów ja pokazuje jeden z nich:

Kod: Zaznacz wszystko: <html> <body> <script> function change(id) { document.getElementById('bb').innerHTML=document.getElementById(id).innerHTML; } </script> <div style="opacity:0;" id="1"> ala ma kota </div> <div style="opacity:0;" id="2"> kot ma ale </div> <div id="aa"> <img onmouseover="change('1')" src="obrazek.jpg"/><img onmouseover="change('2')" src="obrazek.jpg"/> </div> <div id="bb"> aaaaa </div> </body> </html>

teraz małe wyjaśnienie tworzymy skrypt w javascript

Kod: Zaznacz wszystko: <script> function change(id) { document.getElementById('bb').innerHTML=document.getElementById(id).innerHTML; } </scrip

robi on tak pobiera wszystko co znajduje się w elemencie o id które przekazujemy do funkcji (czyli jak dajemy change('1') to id=1)
i pokazuje to w elemencie o id bb(można zmieniac wiadomo ale wtedy id elementu też trzeba zmienić)

Kod: Zaznacz wszystko: onmouseover="change('1')

wywołuje funkcje change() po najechaniu myszką na obrazek

Kod: Zaznacz wszystko: <div id="bb"> aaaaa </div>

jest to div z początkową wartością aaaaaa (po najechaniu na obrazek dopiero po odświeżeniu widać znowu aaaaa. Ten DIV zmienia skrypt w JS.

Kod: Zaznacz wszystko: <div style="opacity:0;" id="2"> kot ma ale </div>

jest to div który przechowuje dane do wyświetlenia się po najechaniu na obrazek style="opacity:0;" działa tak że div nie jest widoczny w przeglądarce (ale w źródle tak)

Jak coś niezrozumiałe/pomóc w czymś jeszcze pisać

Autor postu otrzymał pochwałę

**Posty:** 619 · przez **Pawel_x18** 11 Sie 2010, 09:45

Niestety efekt opacity nie działa pod przeglądarkę IE 8.

Jest jakiś sposób aby zrobić tak, aby po najechaniu na przycisk (grafika1.jpg) wyświetlał się drugi (grafika2.jpg) i oczywiście poniżej inna grafika.

**Posty:** 21 · przez **matx132** 11 Sie 2010, 18:31

zawsze po opacity można dać visibility:hidden; dzięki czemu IE 7,8 (6 nie wiem ale też nie powinna) nie widzą tego fragmentu strony który ma być niewyświetlany:)

**Posty:** 619 · przez **Pawel_x18** 16 Sie 2010, 08:58

Wszystko ładnie działa ukrywa itp, tylko cały pic polega na tym, aby ukryć całkowicie treść.

Tzn. treść jest ukryta jednak białe pole przesuwa całą treść. Jak teraz zrobić tak, aby ukryć obszar w którym owy tekst jest już "ukryty".