Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css][js]Problem z najazdem w CSS
Forum PHP.pl > Forum > Przedszkole
matkli110
25.09.2009, 23:13:49
Mam problem w CSS. Do powiększania zdjęć na stronie używam lightboxa, ale że nie wszystkie zdjęcia na stronie będą miały tę funkcję, dlatego chciałem zastosować funkcję, że przy najeździe kursora na zdjęcie pojawia się w jego polu symbol powiększenia, czyli drugi gif, w innej wyższej warstwie. W js jest wiele tego typu funkcji ale w więszości kłócą się z ligtboxem, dlatego kombinowałem z CSS ale jakoś nie udaje mi się. Nie jestem guru w tych tematach to i pewnie dlatego. Czy jest taka możliwość?
Wiktor P.
26.09.2009, 08:29:15
Może spróbuj w css położyć dwa obrazki na siebie i nadać im różne atrybuty z-index, np. główny rysunek z-index:2, a ten gif z-index:1.
Po najechaniu na rysunek przy pomocy JS zamień wartości z-index rysunków.
Spyder
26.09.2009, 10:06:14 
[HTML] pobierz, plaintext 
  1.  
  2. function SimpleSwap(el,which){
  3.   el.src=el.getAttribute(which || "origsrc");
  4. }
  5.  
  6. function SimpleSwapSetup(){
  7.   var x = document.getElementsByTagName("img");
  8.   for (var i=0;i<x.length;i++){
  9.     var longdesc = x[i].getAttribute("longdesc");
  10.     if (!longdesc) continue;
  11.  
  12.     // preload image
  13.     // comment the next two lines to disable image pre-loading
  14.     x[i].longdesc_img = new Image();
  15.     x[i].longdesc_img.src=longdesc;
  16.     // set event handlers
  17.     x[i].onmouseover = new Function("SimpleSwap(this,'longdesc');");
  18.     x[i].onmouseout = new Function("SimpleSwap(this);");
  19.     // save original src
  20.     x[i].setAttribute("origsrc",x[i].src);
  21.   }
  22. }
  23.  
  24. var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
  25. window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
  26.  
  27.  
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. <img src="images/home-a.gif" longdesc="images/home-b.gif" alt="Home" />
[HTML] pobierz, plaintext
matkli110
26.09.2009, 11:12:15
Dzieki Spyder za pomoc, choc nie specjalnie o to mi chodzilo. Po pierwsze uzywa sie i tak JS, to równie dobrze mozna użyc onmouseover.
Żeby dokladnie wyjasnic o co mi chodzi popatrz na ten link i najedz kursorem na zdjecie LCD. Wlasnie ten efekt chcialem uzyskac, czyli nie wymienic zdjecie na inne tylko zeby ten symbol powiekszenia nalozyl sie na istniejace i jedna klasą mozna bylo uzywać do wszystkich zdjec na stronie. Kombinowalem tak jak pisal Wiktor z Css z z-indexem ale jakos nie moge sobie dac rady. No cóz niestety nie jestem ani alfą ani omegą.

http://www.siba.se/Products/Product.aspx?id=2443366

Maciek
Wiktor P.
26.09.2009, 12:25:30 
[HTML] pobierz, plaintext 
  1. function najedz()
  2. {
  3.     var s = document.getElementById("box2");
  4.     s.innerHTML = '<div style=" background:url(2.jpg); width:50px; height:50px; ">';
  5. }
  6.  
  7. function odjedz()
  8. {
  9.     var s = document.getElementById("box2");
  10.    s.innerHTML = '<div style=" background:url(1.jpg); width:30px; height:30px; ">';
  11. }
  12.  
  13. </script>
  14. <div style="background:url(1.jpg) no-repeat;">
  15. <div id="box2" onmouseover="najedz()" onmouseout="odjedz()" >W tym placeholderze zmieniamy tło</div>
  16. </div>
[HTML] pobierz, plaintext


Nie zrobisz nic bez JS.
Kod powyżej zadziała tak jak chcesz.
Ale tradycyjnie na każdej przegladarce inaczej.
Napisałem to na szybko na kolanie, bo jestem w pracy i nie mam za bardzo czasu, ale może ci się przyda (niestety nie przykładałem żadnej wagi do pełnej poprawności, ale mi działa).
Rysunek 2.jpg jest mniejszy.

Osobiście proponuję przeszukać jakąś bibliotekę (JQuery, Aculo, Prototype) - napewno takie rozwiązanie gdzieś znajdziesz.
I przynajmniej nie będziesz musiał się martwić o niekomaptybilność przeglądarek.

A tak wogóle to masz link do strony gdzie jest efekt, którego szukasz.
Sprawdź sobie kod źródłowy - tam będą linki do skryptów .js z tego serwisu na 99% w nagłówku <head>.
Wstukaj te linki, pobierz kod .js i gitara.
A jak nie ma w nagłówku <head> to będa mieli funkcje w sekcji body.
Większość stron www nie ma zabezpieczonego kodu JS więc droga wolna do podpatrzenia rozwiązań.
matkli110
26.09.2009, 14:31:39
Dzieki Wiktor, spróbuję ten skrypt.
Niestety ta strona (pisana w aspx), jak mozesz to sam sprawdzic, ma pełno js-ów, nie mam pojęcia który z nich to ten odpowiedni, nazwy mi nic nie mówią bo są przypadkowe, a nawet pewnie nawet po funkcjach bym się dobrze nie zorientował czy to właśnie ten który potrzebuję.
Nie mniej jeśli nic innego mi nie wpadnie ;-)))) to popróbuję.
Na razie spróbuję Twojego i zobaczę, a nuż.......



A moze, to czym zaczalem sie bawic w CSS, ale dalo troche odwrotny skutek (działa w IE ale w FF wariuje) czyli gif przy najeździe znika zamiast odwrotnie sie dopiero pojawiac.


.ImagePlus a:hover{
z-index: 1;
visibility: visible;
position: relative;
}



<div class="ImagePlus">
<a id="ImagePlus" rel="lightbox[Images]" href="http://www.siba.se/Archive/SE/6/SEA4935_0.jpg">

<img src="http://www.siba.se/Archive/SE/5/SEA4935_0.jpg" alt=""/>

<img src="http://www.siba.se/App_Themes/Siba/Images/product_zoom_SIBA_SE.gif" style="border-width:0px; position:absolute; margin-left:-75px; margin-top:35px; display:inline; z-index:2;" /></a>
</div>
zegarek84
26.09.2009, 14:50:56
Cytat(Wiktor P. @ 26.09.2009, 13:25:30 ) *
Nie zrobisz nic bez JS.

bzdura winksmiley.jpg...
CSS:
[HTML] pobierz, plaintext 
  1. <html><head><title>test</title><style>
  2. a{display:inline-block;position:relative}
  3. a img.to_big {position:absolute;top:0px;right:0px;display:none}
  4. a:hover img.to_big {display:block}
  5. </style></head>
  6. <body>
  7. <br /><br /><br /><br /><br /><br /><br /><br />
  8. <center>
  9.     <a>
  10.         <img src="http://files.moblo.pl/0/2/38/23861_oczy-obrazki-oczu-5.jpg">
  11.         <img class="to_big" src="http://forum.php.pl/uploads/av-44300.png">
  12.     </a>
  13. </center>
  14. </body></html>
[HTML] pobierz, plaintext
matkli110
26.09.2009, 15:30:10
Czolem Zegarek84

Dzieki serdeczne, to wlasnie bylo to czego szukalem, Proste i genialne i bez JS. Dziala na wszystkich przegladarkach.
Wiktor P.
26.09.2009, 19:29:34
Cytat
Nie zrobisz nic bez JS.

bzdura ...
CSS:
(...)

Muszę przyznać, że się myliłem wstydnis.gif .
Efekt pokazany przez Zegarka84 jest rzeczywiście tym o co chodziło i bez JavaScriptu.

Codziennie coś nowego można się dowiedzieć .

Pozdrawiam
Fafu
26.09.2009, 19:36:15
Cytat
Dziala na wszystkich przegladarkach.
Nie prawda bo nie działa na IE6
zegarek84
26.09.2009, 20:41:27
Cytat(Fafu @ 26.09.2009, 20:36:15 ) *
Nie prawda bo nie działa na IE6

csshover3.htc [lub inne rozwiązania na IE6]
masz rację - nie na wszystkich - nie działa na IE 1 winksmiley.jpg - może to jakoś wesprzesz winksmiley.jpg - mam lepszy pomysł - wracamy do epoki kamienia łupanego - szybko kompy za okno bo tam nawet nie ma prądu winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.