Keresés
Hírlevél
 
Kiemelt témák
»10 éves a prog.hu
»Párhuzamos programozás
»Párhuzamos végrehajtás == szemléletváltás!
Állás/munka
»Tanárt keresek
»Port.hu film tartalmának kinyerése
»PHP programozó kerestetik
»Fejlesztői megbízásokat/munkát keresek
»Senior .Net fejlesztő szabad kapacitással
» több téma
Tudástár
?PHP if-nél megakadtam
? torrent file helyett txt-t
?PHP:keresés szó szerint...
√Mobilinternet használata robotokban
?Delphi Form méretezési probléma
?HelpProvider alkalmazás .HLP fájlban
√2 oldalas form
√SetFocus hatástalan
?XP-n megy Win7-en megakad (Delphi)
?Hiányos mp3 hallgatás telefonról! C#
√A legalsó scrollTop értéket nem veszi figyelembe
√3 dív pozicionálása (2 egymás mellé, 1 ezek alá)
?Curl login Joomla-ba (PHP)
*Java Axis webservice file küldés és fogadás
?C# scrollozható form
» több téma
Társalgó
»Az általános műveltség része kellene, hogy legyen a programozni tudás?
»Get flood elleni védekezés
»Újra programozni fog a Facebook alapítója és multimilliárdos elnöke
»Firebird - Több adatbázis vagy egy?
»Clipper kontra XP
»Webshop ár kb...
»Hogy működik egy apróhirdető oldal (MySQL)?
»Körlevél script PHP + MySQL
»New project probléma VS 2010 C#
»Kezdőknek:grafikus felület választás
» több téma
ASPC#C++CSSDelphiFlashJavaJavaScriptPascalPerlPHPPythonuniPaaSVisual BasicVisual C++  »    

Tudástár

»

Háttérkép változtatás css

»

Háttérkép változtatás css

nyitotta: hella, idő: 2012.02.09., moderátor: moderator, megoldás elfogadva: 2012.02.09. 18:22
  Értesítés változás esetén Felvétel kedvencekhez Küldés emailben Nyomtatható verzió

Kategóriák:Web-programozás » CSS

Kulcsszavak:
Sorrend:
Időzóna:
Blokkméret:
Háttérkép változtatás css - Tudástár - Prog.HuHáttérkép változtatás css - Tudástár - Prog.Hu
Oszd meg másokkal is!
Sziasztok. Olyat szeretnék megvalósítani, hogy ha rákattintok az egyik gombomra, akkor kicserélje a háttérben levő képet, illetve a szöveg színét megváltoztassa. A szöveg szín meg is változik de a képet nem cseréli ki. A kép nevét helyesen írtam be illetve elérése is helyes mivel eclipse alatt levő böngésző látja. De a mozillában nem történik meg a háttérkép kicserélése. Egyenlőre itt tartok. Valakinek valami ötlete? Előre is köszi a választ. Üdv: Hella
Kódom:

<div id="header-welcome" >
                        <ul>
                                <li id="welcome-sentenses"> Üdvözöljük az Online Market piacterén</li>
                                <li><a class="current" href="Login.html">Bejelentkezés</a></li>
                                <li><a href="../Registration/Registration.jsp">Regisztráció</a></li>
                        </ul>
                </div>

css:
#header-welcome{
        border-spacing:  0px 0px ;
        height: 38px;
        width: 810px;
        line-height: 2.3em;
        float:left;
}
#header-welcome li{
        background: black;
        display: inline;
        padding: 0;
        margin: 0;
}
#welcome-sentenses{
        padding: 8px;
        height: 38px;
        float: left;
}
#header-welcome li a {
        margin-top: 16.5px;
        margin-right: 8px;
        text-decoration: none;
        float:right;
        color:#5DB0E6 ;
        display:block;
        width: 150px;
        line-height: 1.5em;
        height: 21px;
        background-image:url(../images/trapez.jpg);
        background-repeat: no-repeat;
        text-align: center;
}
#header-welcome a.current:visited{

        color: #FFFFFF;
        list-style: none;
        background-image:url(../images/trapez_blue.jpg);
        background-repeat: no-repeat;

}
Hello!

És ebben a kódban pontosan hol is található az a gomb, amire klikkelve cseréli a képet?

Anélkül nehéz megmondani, hol a gond...

/tökfilkó/ előzmény
Én úgy látom, a visited selectorral akarja megoldani.
Tehát ha rákkattintottál az a-ra, visited lesz, és ezzel a pseudo selectorral eltérő kinézetet lehet neki adni például a :link, :active, vagy :hover alakokhoz képest. előzmény
de az <a> nem gomb... előzmény
Ez érdekes. IE-ben működik. Az elképzelés nekem jónak tűnik. Firefoxban háttérszínnel meg lehet csinálni. De a háttérkép valamiért nem lesz jó. A firebug nem jelzi a :visited class-t. Létezik, hogy bugos a Mozilla 10? előzmény
Bocsi félreírtam az első kommentemben. Csak egy hivatkozás van az <a> tag-ok nál és a css ben az utolsó rész(visited)-ben próbáltam azt megoldani hogy változzon a háttérkép! Erre kellene valami megoldás. előzmény
Explorerben nekem is jó de firefoxban és chromban egyáltalán nem:D Nah ez miért van?? előzmény
Itt a magyarázat: Privacy and the :visited selector
Akkor adj neki onclicket valahogy így:
...onclick="visited(this)"...
function visited(element) {
    element.className = "visited";
    // .style-t is lehet piszkálni, de css-ből szebb
}
...
.visited{...}
előzmény
És ettől, már tökéletes Háttérkép változtatás css-megoldás lesz... előzmény

...hmmm?...

előzmény
Szép megoldás. De nekem még mindig nem sikerült előre jutnom az ügyemben... előzmény

Amennyiben copy-paste kell, akkor 1 kicsit várjál.

Csak előtte befonom a szemöldököm!

előzmény
Amit linkeltél ott hol a visited? Még focust sem látni csak hovert. Ráérsz fonogatni :) előzmény
Próbálkozz valós-időben :) http://dabblet.com/gist/1780711 előzmény
:hover-ra nekem is működik, csak :visited-re nem előzmény

Azért mert nem így kell

#header-welcome a.current:visited{}

hanem így

#header-welcome li.current a{}

előzmény
Nézd ezt az oldalt -> lista
és nézd meg a következő sorokhoz tartozó teszteket:
:link
:active
:hover
:visited

Ezeknél pont a háttér változtatás van prezentálva... előzmény
Töröltem előzmény
Köszönöm a különféle megoldásokat! hudibandinak adom a pontot mert az ő megoldását próbáltam először működött! Üdv: Hella előzmény
Igen, az van presentálva, de :visited-re csak color-t változtat meg, mást nem... amelyik példánál a hátteret módosítja, az is csak IE alól ment nálam, chrome és mozilla alól nem.

Próbálkoztam én is egy egyszerű kóddal:

<html>
  <title>valami</title>
  <head>
    <style type="text/css">
    a div{
      background-image:url(alap.png);
      background-repeat: no-repeat;
    }

    a:visited div{
      background-image:url(visited.png);
      background-repeat: no-repeat;
    }

    a:active div{
      background-image:url(active.png);
      background-repeat: no-repeat;
    }

    a:hover div{
      background-image:url(hover.png);
      background-repeat: no-repeat;
    }
    </style>
  </head>
  <body>
    <div id="header-welcome">
      <ul>
        <li id="welcome-sentenses"> Üdvözöljük az Online Market piacterén</li>
        <a href="teszt1.html"><div>Link 222</div></a>
        <a href="teszt2.html"><div>Link 111</div>
      </ul>
    </div>
  </body>
</html>

Mindenre működik, csak a visitedre nem... előzmény
Hmm...
De akkor tulajdonképpen ez sem a :visited selectorra megy, hanem egy egyedi class-ra, nem? De kimondottan :visited selectorra nem... vagy ez azzal is jó lenne? Már csak kíváncsi vagyok... előzmény
Nem a vita kedvéért, de
1. Az "a" elembe nem rakunk "div" elemet
2. Az elfogadott megoldás nincs szinkronba a kérdés címével
3. A következő kis korrigálással nekem Firefox alatt is változik a háttér
<html>
<head>
<style type="text/css">
/* az első sor a plussz az eredetihez képest */
a{background-color:green;}
a:visited{background-color:yellow;}
</style>
</head>
<body>
<a href="http://www.w3schools.com">W3Sschools</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>Note:</b> The :visited selector style links to pages you have already visited.</p>
</body>
</html>
És szerintem háttérképpel is jó, de csak "a" elemre. előzmény
Oké... elfogadom... <a>-n belül div...
Csak próbálkoztam... előzmény
És valóban működik... komolyan mondom, hogy ugyanezt kipróbáltam, és nem ment... lehet elgépeltem valamit... ez nagyon gáz, ég a képem rendesen... előzmény
Nem azért írtam, csak a sorelemek és blokkelemek közötti különbség miatt. előzmény
És szerintem háttérképpel is jó, de csak "a" elemre.
előzmény
Megállapításom a ":visited"-re vonatkozik, de ha téves akkor BOCSI. előzmény
Igen én is arra gondoltam. csak az nem jó img-re :) előzmény

Bocsi, de ezt most nem értem..
Hol írtam én "img" elemről? előzmény
Az én hibám, :) azt hittem, hogy értesz. background url-re gondoltam. Tehát a visitedre nem lehet képet rakni CSS-ből. előzmény
Háttérkép változtatás css - Tudástár - Prog.HuHáttérkép változtatás css - Tudástár - Prog.Hu
Oszd meg másokkal is!
Belépés
E-mail cím:
Jelszó:

cvonline.hu
»iOS fejlesztő
»Senior web programozó
»Java fejlesztő (Bécs)
»Java fejlesztő (front-end, backend)
»PHP fejlesztő (Ausztria, Németország)
»Solaris rendszermérnök
» még több állás
Kérdésed van?
Problémád, kérdésed van? Segítünk neked is. Csak kattints ide!
RSS források
-Hírek
-Cikkek
-Fórumok
-Állás/munka
Top pontgyűjtők
»Árnyék1.100
»silentworks910
»Robi80910
»szabofe860
»bubori.attila760
»djjjozsi680
»Galovics660
»Riha590
»Frostech0560
»Csaboka2550
A nap kifejezései
»Adatszegmens
»Konstans
»Makró
» ugrás a wikire
Hírek
»Az általános műveltség része kellene, hogy legyen a programozni tudás?
»Újra programozni fog a Facebook alapítója és multimilliárdos elnöke
»Vizuális felülettervezőt adott ki .NET-es Android-alkalmazásfejlesztéshez a Xamarin
» több hír
PC Fórum hírek
»Elvennék és felhasználóinak adnák a Facebook összes pénzét
»Rejtélyes ikont dugdosgat a Microsoft a Windows 8-ban
»Út a Windows 8-ig - a Windows rendszerek három évtizedének története, képekben
»Mától bárki regisztrálhat a so.cl-ra, a Microsoft közösségi oldalára
»Megérkeztek az első képek az Unreal Engine 4 játékmotorról
»Itt az első videó a a Firefox Windows 8-as változatáról
»Nyártól akár 150 megabites nethozzáférést is ad az Invitel
»Kilenc kritikus biztonsági hibát javít az új Google Chrome
Top wikieditorok
»Sting
»Doi
»FlamingClaw
»Argathron
»Csaboka2
»Muki987
»NevemTeve
»Ivn
»Kelemzol
»Joexy
» ugrás a wikire