[XHTML CSS] Swap image effect

[Verwijderd]

Op mijn website wil ik graag een swap image-effect creeeren mbv xhtml/css (bij een mouseover). Kheb al wel gezocht op dit forum, maar het gaat steeds over visible/hidden divs, niet over het swappen van images (of divs).

In het voorbeeld van de t.net makeover staat veel nuttige informatie, bijvoorbeeld ook het gebruik van een extern behavior-filetje (aangeroepen met behavior: url(cssmenu.htc);), zodat je daar je javascript in kunt gooien, daar ziet dat er als volgt uit:

code:

<attach event="onmouseover" handler="show" />
<attach event="onmouseout" handler="hide" />
<script type="text/javascript">
function show() { if(element.childNodes[1]) element.childNodes[1].style.display = "block"; }
function hide() { if(element.childNodes[1]) element.childNodes[1].style.display = "none"; }

Zoiets wil ik dus graag, maar dan voor een swap image-effect. (Hoe je bijvoorbeeld een menu zichtbaar maakt etc. is me nu wel duidelijk.) Heeft iemand dit toevallig al eens gedaan of wat is eigenlijk de "gangbare" manier om zoiets te doen in het hele css/xhtml verhaal? Ik wil het dus graag xhtml1.1/css2-compliant hebben

[Verwijderd]

Je bedoelt toch niet: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ ?

[flashin]

Denk het wel

code:

#menu a {
   ...
   background: url("button.gif") top left no-repeat;
   ...
   }
#menu a:hover {
   ...
   background-position: 0 -39px;
   ...
   }
#menu a:active {
   ...
   background-position: 0 -78px;
   ...
   }

[ Voor 61% gewijzigd door flashin op 27-11-2003 22:18 ]

[Verwijderd]

Precies, bedankt! Hoe simpel kan het eigenlijk zijn...

Maar... als ik de volgende code (het relevante deel) gebruik, werkt het niet:

code:

.nav {
    float:right;
    width:488px;
    heigth:105px;
    background-image:url(images/line.gif);
    background-position:bottom;
    background-repeat:repeat-x;
    }
#nav_home {
    float:left;
    width:122px;
    height:43px;
    }
#nav_home a {
    background-image:url(images/nav_01.gif);
    background-position:top left;
    background-repeat:no-repeat;
    }
#nav_home a:hover {
    background-position: 0px -10px;
    }

met in de HTML:

code:

<div class="nav"><div id="nav_home"><a href="#"></a></div></div>

Ik zie geen nav_01.gif, laat staan de "shift", vannalles geprobeerd..

[crisp]

Cascading Stylesheet:

#nav_home a {
    display:block;
    width:100%;
    height:100%;
    background-image:url(images/nav_01.gif);
    background-position:top left;
    background-repeat:no-repeat;
    }

[Verwijderd]

crisp, bedankt voor je snelle antwoord! het werkt

ik denk trouwens dat dit wel voor meer mensen een goede tip/werkwijze is..

[topic closed]

[Verwijderd]

Niet geheel ;-). Ten eerste kun je i.p.v. een underscore (_) beter een hyphen (-) gebruiken. Naast dat het in meer browsers werkt (oudere) is het ook leesbaarder (persoonlijk). Dat stukje CSS kan trouwens nog ingekort worden, maar dat is maar net wat je wil, ikzelf houd er van om het zo te schrijven:

code:

#nav-home a{
 display:block;
 width:100%;
 height:100%;
 background:url(images/nav_01.gif) top left no-repeat;
}
/* omdat width en height alleen daar staan voor IE en omdat het mogelijk problemen kan opleveren: */
#nav-home>a{
 width:auto;
 height:auto;
}

[Verwijderd]

ok, bedankt!

na wat verder gewerkt te hebben kwam ik erachter dat het voor mij net zo handig was om een transparant gifje te maken en elk menu-item gewoon als tekst er neer te zetten (voordeel: slechts 1 kleiner gifje laden ipv 16, 8 voor de button en 8 voor de hover-actie, de menu-items zijn natuurlijk makkelijk te hernoemen en er is ook nog eens veel minder css nodig). Maar nu wil ik deze tekst graag verticaal centreren in de div. Ik kom er niet uit, want vertical-alignment wordt toegepast op cellen en inline divs als ik het goed gelezen heb, maar deze div is display:block. voor de gein eens op display:inline zetten geeft rare resultaten en een div eromheen gooien of juist erbinnen helpt ook niet echt...

Cascading Stylesheet:

.nav {
    float:right;
    width:488px;
    heigth:105px;
    margin-bottom:25px;
    padding-bottom:1px;
    background-image:url(images/line.gif);
    background-position:bottom;
    background-repeat:repeat-x;
    }
#nav-item {
    float:left;
    width:122px;
    height:43px;
    text-align:center;
    vertical-align:middle;
    }
#nav-item a {
    display:block;
    width:100%;
    height:100%;
    font: bold 13px Georgia, serif;
    color: #000;
    text-decoration: none;
    }
#nav-item>a{
    width:auto;
    height:auto;
}
#nav-item a:hover {
    background-image:url(images/circle.gif);
    background-position:50% 50%;
    background-repeat:no-repeat;
    }

Dus mijn vraag luidt: hoe krijg ik nu de tekst in #nav-item (a) verticaal gecentreerd?

[ Voor 1% gewijzigd door Verwijderd op 29-11-2003 02:42 . Reden: woordje vergeten.. ]

[Verwijderd]

code:

a{
 line-height:1.2em; /* gebruik 'em', aangezien mensen met een grotere font-size anders problemen hebben */
 vertical-align:middle;
}

[Verwijderd]

Het werkt niet, na doorlezen van

http://www.w3.org/TR/CSS2/visudet.html#line-height

en

http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

zou je inderdaad denken van wel.. helaas.. ik heb wel een kleine workaround gevonden (gewoon een <br /> ervoor en dan kan het in mijn geval wel) - maar ik heb ook 1 item van 2 regels en da's toch niet perfect zo. (http://www.webpro.nl/ib.nl/ >> geen reclame, geen sitecheck - hoe ik de boel op de 'home' naar onderen doorgetrokken krijg post ik wel ff in een nieuw topic..)

[Justice]

moet je de line-height van het item zo hoog maken als de hoogte van de button/item, dan centreerd ie daar de text in.

Cascading Stylesheet:

line-height: 43px;

bijvoorbeeld.

ow dat was al gezegt. Sorry

[ Voor 11% gewijzigd door Justice op 30-11-2003 15:11 ]

[Verwijderd]

nou dat had ik dan niet door.. het werkt!

bedankt joh.. zo had ik het helemaal niet begrepen - alleen nu moet ik een aardig stuk css zo goed als dubbel in de Stylesheet planten, is er een optie om een deel te kopieren zeg maar.. nu heb ik dit:

Cascading Stylesheet:

.nav-item {
    float:left;
    width:122px;
    height:43px;
    }
.nav-item a {
    display:block;
    width:100%;
    height:100%;
    font-family:Georgia, serif;
    font-weight:bold;
    font-size:14px;
    color: #000;
    text-decoration: none;
    line-height:43px;
    text-align:center;
    vertical-align:middle;
    }
.nav-item>a{
    width:auto;
    height:auto;
    }
.nav-item a:active, .nav-item a:hover {
    background-image:url(images/circle.gif);
    background-position:50% 50%;
    background-repeat:no-repeat;
    }
.nav-item-twolines {
    float:left;
    width:122px;
    height:43px;
    }
.nav-item-twolines a {
    display:block;
    width:100%;
    height:100%;
    font-family:Georgia, serif;
    font-weight:bold;
    font-size:14px;
    color: #000;
    text-decoration: none;
    line-height:21px;
    text-align:center;
    vertical-align:middle;
    }
.nav-item-twolines>a{
    width:auto;
    height:auto;
    }
.nav-item-twolines a:active, .nav-item-twolines a:hover {
    background-image:url(images/circle.gif);
    background-position:50% 50%;
    background-repeat:no-repeat;
    }

en het scheelt maar 1 regeltje! (line-height:43px/21px;)

edit:

o wat dom.. sorry - t is zondagmiddag, dat is na altijd zaterdagnacht

ik kan natuurlijk gewoon .nav-item, .nav-item-twolines etc. gebruiken

[ Voor 13% gewijzigd door Verwijderd op 30-11-2003 15:33 ]

[Justice]

Cascading Stylesheet:

.nav-item a, .nav-item-twolines a {
    display:block;
    width:100%;
    height:100%;
    font: bold 14px Georgia, serif;
    color: #000;
    text-decoration: none;
    text-align:center;
}

.nav-item a {
line-height:21px;
}

.nav-item-twolines a{
line-height:42px;
}

zoiets moet het ook kunnen En wellicht zonder height:100% ook nog..
Kijk hier ook eens naar: http://www.sitepoint.com/article/966

[ Voor 62% gewijzigd door Justice op 30-11-2003 17:10 ]

[Verwijderd]

klopt, tnx again.. maar het staat ook wel gewoon in http://www.w3.org/TR/CSS2/

ik was uit overzichtelijkheid begonnen met alles apart te definieren, maar naarmate de stylesheet groter werd is het toch wel het overwegen waard om de "shorthand" methode te gebruiken

[Genoil]

Ik heb een vraag die hieraan gerelateerd is:

is het mogelijk om de "active" state van een <a> middels Javascript weer op "default" te zetten? het enige wat ik zo kan bedenken is een element.click() af te vuren op een onzichtbaar element maar da's niet echt "mooi"...

[Verwijderd]

ik volg je niet helemaal..

misschien gewoon de "active"-state helemaal niet definieren?

[Genoil]

Verwijderd schreef op 01 december 2003 @ 15:30:
ik volg je niet helemaal..

misschien gewoon de "active"-state helemaal niet definieren?

nou ik bedoel, dat je een a:active gedefineerd hebt, om een "down-state" aan te geven voor een knop. die gaat pas weer op normaal als je op een andere <a> klikt in hetzelfde venster. stel nou, dat je zo'n actieve knop, zonder een andere knop aan te klikken, weer in z'n normale stand wilt zetten, kan dat dan met javascript?

het is misschien toch wel een beetje offtopic realiseer ik me nu...ik betrap mezelf ook ineens op het feit dat ik dat intens wazige en brakke gevoel waarmee ik al de hele dag zit maar eens moet onderkennen als in "kut ik heb de griep ik ga naar huis "