Kuvaan kehykset, kun menee hiirellä päälle (html)

[jhh]

Minulla on nyt tällainen lightbox tehtynä:

<a href="images/apina.jpg" rel="lightbox" title="Apinat auttavat apinoita.">
<img src="images/apina_thumbs.jpg" alt="Apinat" vspace="10" hspace="25" /></a>

Miten saan tuohon koodiin lisätty, että pikkukuvaan tulee kehykset, kun menen hiirellä kuvan päälle?

[morbusg]

onmouseover/onmouseout-eventteihin kiinnittymällä, joskin helpointa lienee esim. jquery:llä tai muulla vastaavalla esimerkiksi:

Koodi: Valitse kaikki

$(document).ready(function() {$("img").hover(function() { $(this).toggleClass("hover")})})

Jossa käytettävässä tyylitiedostossa määritetty luokka .hover esim.:

Koodi: Valitse kaikki

.hover { outline: 3px double black }

Jos saa sen verran opastaa/pyytää/jotain, niin elä hyvä mies/nainen/jotain noita vspace/hspace attribuutteja määritä, vaan hoida sekin tyylitiedoston avulla.

MUOKS: D'oh, tuo kuvahan on ankkurin sisällä, joten mitään javascript-kikkailua ei pitäisi tarvita vaan pelkän CSS:n pitäisi riittää:

Koodi: Valitse kaikki

img:hover { outline: 3px double black }

[macsami]

Paras tapa laittaa kehykset on tehdä se suoraan CSS-tyylien avulla, eikä mitään javascriptejä.

Koodi: Valitse kaikki

img:hover { border: 3px solid #000 }

#000 mieluummin kuin "black", koska se on standardien mukaista laittaa värit hexoina.

[jhh]

Kiitos hyvistä vastauksista =) Muutama tarkennus vielä:

- miten määritän tuon .hoverin css:n puolella noille kuville? Kuva Kerralla? Voitteko laittaa esimerkkiä?
- sama kysymys, mutta koskee v- ja hspacen määrityksiä?
- tarkoitatko javascript kikkailulla tuota lightbox-juttua? Kuinka ne css:llä voisi hoitaa? Hmm...

[Macco]

IE <7 ei oikein jaksa ymmärtää pseudo-classeja muissa elementeissä, kuin linkeissä, joissa on määriteltynä href. Eli kannattaa kiinnittää hoveri a-elementtiin.

Koodi: Valitse kaikki

a:hover { border: 3px solid #000 }

EDIT: vastataanpa vielä näihin.

- miten määritän tuon .hoverin css:n puolella noille kuville? Kuva Kerralla? Voitko laitta esimerkkiä?
> ei .hover vaan :hover Ihan eri asia. Ja hover tulee kaikille elementeille, joille se on määriteltynä. a:hover tulee kaikille linkeille. .kuva:hover tulee elementeille, joiden class on kuva. Eli <a href="#" class="kuva"><img src="jokukuva.jpg"></a>

- sama kysymys, mutta koskee v- ja hspacen määrityksiä?
> Jos lisäät siihen css-määritykseen marginit, niin sitten ne tulevat siihen elementtiin, johon ne on määritelty:
a.kuva { margin: 5px; } tai
a.kuva { margin-top: 5px; margin-right: 2px; margin-bottom: 10px; margin-left: 20px; }, ja sama toisin muotoiltuna:
a.kuva { margin: 5px 2px 10px 20px; }

- tarkoitatko javascript kikkailulla tuota lightbox-juttua? Kuinka ne css:llä voisi hoitaa? Hmm...[/quote]
> Tuolla javascriptilla toteutettiin sama, minkä voi tehdä yksinkertaisemmin css:llä.

[macsami]

Jos haluat kaikille kuville kehyksen niin se onnistuu:

Koodi: Valitse kaikki

img:hover { border: 3px solid #000; }

Ongelmaksi tulee sitten se, että nyt kaikki kuvat mitä sivuilla tulee olemaan on kehystetty. Ongelman saa ratkaistua laittamalla linkkeihin tai kuvaan luokan ja sitten css:n puolella määrittelee sille luokalle kehyksen.

Linkille oma luokka:

Koodi: Valitse kaikki

<a class="kuva" href=""><img src="" alt="" title="" /></a>

Tai kuvalle oma luokka:

Koodi: Valitse kaikki

<a href=""><img class="kuva" src="" alt="" title="" /></a>

Sitten vaa css-puolelle:

Koodi: Valitse kaikki

.kuva:hover { border: 3px solid #000; }

[morbusg]

#000 mieluummin kuin "black", koska se on standardien mukaista laittaa värit hexoina.

Minkä standardien? Ainut mitä löysin on W3C:n CSS *suositus*. Ja sama HTML-puolella.

[jhh]

Anteeksi nyt tyhmyyteni, mutta pakko vielä kysyä selvennystä:
Korjasin koodia seuraavasti, mutta vieläkään ei toimi: =/

HTML-puolella

<div id="oikeapalkki">

<br/><br/><br/><br/><br/>
<a href="images/apina.jpg" rel="lightbox" title="Apinat auttavat apinoita.">
<img class="kuva" src="images/apina_thumbs.jpg" alt="Apinat"/></a>

</div>

JA CSS-PUOLELLA

.kuva:hover {border:3px solid #00FF33}

[Macco]

Kokeilepa näin:

HTML-puolella

<div id="oikeapalkki">

<br/><br/><br/><br/><br/>
<a class="kuva" href="images/apina.jpg" rel="lightbox" title="Apinat auttavat apinoita.">
<img src="images/apina_thumbs.jpg" alt="Apinat"/></a>

</div>

JA CSS-PUOLELLA

a.kuva:hover {border:3px solid #00FF33}

[macsami]

Minkä standardien? Ainut mitä löysin on W3C:n CSS *suositus*. Ja sama HTML-puolella.

No joo, vaikka onkin suositus niin on se kuitenkin hyvä opetella käyttämään ihan hexoja, koska silloin ainoastaan käyttäjän näytön säädöt vaikuttavat väriin. Jos käyttää nimellisiä niin silloin voi selainten välillä olla väreissä pieniä eroja.

[morbusg]

Minkä standardien? Ainut mitä löysin on W3C:n CSS *suositus*. Ja sama HTML-puolella.

No joo, vaikka onkin suositus niin on se kuitenkin hyvä opetella käyttämään ihan hexoja, koska silloin ainoastaan käyttäjän näytön säädöt vaikuttavat väriin. Jos käyttää nimellisiä niin silloin voi selainten välillä olla väreissä pieniä eroja.

Eiköhän se black ole ihan sama kuin #000 joka paikassa

<br/><br/><br/><br/><br/>

Pakotettuja rivinvaihtoja ei ole järkeä käyttää ulkoasun luomiseen. Tai yleisemmin; erota sisältö ja ulkoasu toisistaan (HTML ja CSS). Yllä oleva saavutetaan vaikka seuraavalla tyylimääritelmällä:

Koodi: Valitse kaikki

#oikeapalkki { padding-top: 5em }

[jhh]

Puuttuuko minulta tuosta html- tai css-puolelta jotain koodia, kun en saa borderia millään näkyviin...
Auttakaahan minua...

- jhh -

[jhh]

Kokeilepa näin:

HTML-puolella

<div id="oikeapalkki">

<br/><br/><br/><br/><br/>
<a class="kuva" href="images/apina.jpg" rel="lightbox" title="Apinat auttavat apinoita.">
<img src="images/apina_thumbs.jpg" alt="Apinat"/></a>

</div>

JA CSS-PUOLELLA

a.kuva:hover {border:3px solid #00FF33}

Tässä koodi minkä laitoin. Ja ei pelaa edelleenkään. Eikö tuota classia pidä vielä määritellä jossain muualla?
img:hover { border: 3px solid #000; } <-- Tuon kun laitoin css:ään niin sain kyllä kaikkiin kuviin reunuksen. Sekään vaan ei ole ihan oikein koska haluan reunan vaan pikkukuvaan ja nyt tuolla tyylillä se tulee hetkeksi myös
siihen avautuvaan isoon kuvaa? =/

[morbusg]

Puuttuuko minulta tuosta html- tai css-puolelta jotain koodia, kun en saa borderia millään näkyviin...
Auttakaahan minua...

- jhh -

Jos alla olevan tyyppisellä ei pelaa, niin sitten taitaa tuo lightbox vaikuttaa asiaan.

Koodi: Valitse kaikki

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Lightbox ja img:hover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      #oikeapalkki { padding-top: 5em }
      .hover:hover { border: 3px solid #00ff33 }
      .hover img { margin: 10px 25px }
    </style>
    <script type="text/javascript" src="lightbox_hostaaja"></script>
  </head>

  <body>
    <div id="oikeapalkki">
      <a class="hover" href="images/apina.jpg" rel="lightbox"
        ><img alt="Apinat auttavat apinoita" src="images/apina_thumbs.jpg"
        ></a>
    </div>
  </body>
</html>

[jhh]

Kiitoksia vaan. Tuolla sain sen nyt pelaamaan. =)

[jpq]

siihen pakko sanoa jotain tuohon mustan olemiseen onhan black varmasti mutta sitten ne muut ja helpompi vaihtaa väriä kun se numerona suorilta no ainakin minusta. jos joku muu väri onkin joskus se oikea ja melkein luulen että perus setti oranssia laskematta lienee vakio joka paikassa enpä ole sitä nähnyt koskaan määritellyn ja tuo setti aika ikivanhawindowsmäinen. ps. asiaa sivuten on muuten tosi vaikeaa edes 4 väriä jotka erottuu hyvin toisistaan kaikkina pareina löytää saatikka vaikkapa 8.