+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: zmieniające się obrazki po wskazaniu myszką na linku (/thread-zmieniajace-sie-obrazki-po-wskazaniu-myszka-na-linku)
zmieniające się obrazki po wskazaniu myszką na linku - MatMc - 02-10-2010
Witajcie,
Robię atlas internetowy
chciałbym, aby po "najechaniu" myszką na link (tekstowy)
obok pojawiało się zdjęcie. (coś podobnego do onmouseover)
Aha - aktywnych linków - będzie sporo, a zdjęcia będą różne...
Tak jak w atlasie
przykładowo:
napis-link "BMW" - po najechaniu myszką - logo BMW
napis-link "Mercedes" - po najechaniu myszką - logo Mercedesa
są takie skrypty?
pozdrawiam
RE: zmieniające się obrazki po wskazaniu myszką na linku - freqfreq - 02-10-2010
css'em:
<a href="javascript:void(0)" onClick="document.getElementById('ramka').style.background-image='url(obraz.jpg)'">link</a>
wydaje mi się że powinno być ok
RE: zmieniające się obrazki po wskazaniu myszką na linku - Mayestic - 02-10-2010
onmouseover - działa po najechaniu myszką
RE: zmieniające się obrazki po wskazaniu myszką na linku - ixtab - 02-10-2010
Ja odrazam JS, bo są ludzie, którzy nie mają włączonej obsługi skryptów. Co można, zawsze najlepiej w CSS. użyj text-indent:-9999 i background:url dla a:hover
RE: zmieniające się obrazki po wskazaniu myszką na linku - MatMc - 03-10-2010
dzięki za odpowiedzi!
może coś z tego wyjdzie.
text-indent: -9999 - ciekawa sztuczka
- tylko, ja nie chcę znikającego tekstu
Chciałbym tabelkę/ramkę
w lewej kolumnie napis [link]
po prawej - odpowiadający napisowi - obrazek.
Myślałem, żeby wykorzystać CSS-rollover - jeden obrazek to kolor tła strony i drugi - ten właściwy.
tylko zupełnie nie wiem, jak wykonać takie przesunięcie, aby po jednej stronie było menu, a po drugiej - pojawiały się i znikały obrazki.
RE: zmieniające się obrazki po wskazaniu myszką na linku - freqfreq - 03-10-2010
Zrobiłem ci prosty przykład:
http://xlc.pl/files/imgchange.html
RE: zmieniające się obrazki po wskazaniu myszką na linku - Kartofelek - 04-10-2010
a to nie lepiej jakies css tooltip albo css rollover? wystarczy pogooglowac.
RE: zmieniające się obrazki po wskazaniu myszką na linku - MatMc - 05-10-2010
dzięki ogromne!
skrypt z przykładem - to jest to, czego szukam! ! !
tylko, że pozycji będzie około tysiąca
- przy wyborze ostatniej pozycji - miniaturka pokaże się na samej górze ;/
szukam czegoś w rollover
mam coś takiego:
Kod:
<style type="text/css"> a.link {background: url(obrazek.jpg) no-repeat; display:block; height:40px; width:100px; overflow:hidden; } a.link:hover { background-position: 0px -40px; } a.link span {display:block; text-indent: -9999px;} </style>
<p><a class="link" href="adres"><span>aktywny link</span></a></p>ale tu zmieniający się obrazek jest aktywnym linkiem :-(
- a ja szukam czegoś, co zaproponował freqfreq.
RE: zmieniające się obrazki po wskazaniu myszką na linku - Labsta.com - 08-10-2010
Oprócz tego, że to kod z mojego bloga :] to zbyt kombinujesz.
To co chcesz osiągnąć to ta sama sztuczka, której używa się przy rozwijanym menu.
Czyli ukrywasz sobie obrazek, pozycjonujesz go względem linku. Potem robisz coś w stylu
Kod:
a.link:hover .obrazek {display: block;}Jak nie rozumiesz, to poszukaj sobie "css drop-down menu".