Søg
Avatar billede minus Nybegynder
11. november 2007 - 19:36 Der er 17 kommentarer og
2 løsninger

Hvordan skriver jeg dette i ren xhtml og css?

Som overskriften siger:

<img src="images/design_01.jpg" alt="" onmouseover="this.src='images/design2_01.jpg'" onmouseout="this.src='images/design_01.jpg'" onclick="location.href='fotografier.html'" />

Ovenstående skal skrives i ren xhtml og css. Altså uden brug af nogen form for scripting sprog.
Avatar billede nielle Nybegynder
11. november 2007 - 20:11 #1
Desværre ikke muligt...
Avatar billede Slettet bruger
11. november 2007 - 20:29 #2
...måske det alligevel kan lade sig gøre via CSS og HTML...?
Se her:
http://www.cssplay.co.uk/menu/lightbox3#bird11
Avatar billede nielle Nybegynder
11. november 2007 - 20:51 #3
hover-effekter er kun lovligt CSS på href-links. Det er desværre ikke lovligt på img-tags.
Avatar billede w13 Novice
11. november 2007 - 20:53 #4
Minus>> Hvorfor vil du undgå JavaScript? Det er ikke meningen, at (x)html eller css skal kunne udføre kommandoer på den måde, du ønsker. Måske kan man få CSS til at gøre noget af det, men det er meget mere logisk/naturligt med JavaScript. Hvorfor er det, du vil undgå det?
Avatar billede minus Nybegynder
11. november 2007 - 21:04 #5
w13 vi har en aflevering hvor vi har nogle stramme rammer. det skal KUN være xhtml og css. Ved godt at det er utrolig besværligt og kræver bare mere kode.
Avatar billede nnb Nybegynder
11. november 2007 - 21:31 #6
Det er sært atr skrive det om til css, da css kun er lavet til efekter:( .
desværre.
Avatar billede w13 Novice
11. november 2007 - 22:36 #7
Effekter er måske så meget sagt, men det er i hvert fald til at definere elementers fremtoning på siden og sidens generelle layout. Det er dog ikke lavet til at udføre kommandoer på forskellige events.
Avatar billede Slettet bruger
12. november 2007 - 00:08 #8
nielle:
Lovligt? Altså iflg. opgaven fra "Minus", eller iflg. W3C?
Fordi, opgaven er jo stadig løst, selvom at det ikke er 100% iflg. W3C. Og det er nok den eneste måde at løse opgaven på, uden at bruge Flash...
Avatar billede w13 Novice
12. november 2007 - 00:15 #9
Extend: Ja, hvis opgaven altså går ud på at lave den billedfunktion og det ikke bare er noget, Minus selv har valgt.
Avatar billede nielle Nybegynder
12. november 2007 - 10:07 #10
Hover virker ikke sammen med img-tags. Ifølge W3C er den kun lovlig sammen med a+href, men alt efter hvilken browser man har kan den godt virke på andre tags alligevel. Men, nu virker den altså ikke sammen med img.

Dertil kommer at vi også skal have erstattet onclick med en ikke-javascript løsning.

Svjv. er der er kun en mulig løsning på dette, nemlig at droppe img-tags til løsningen og så kaste sig over a+fref tagget:

F.eks. med noget i denne stil:

<html>
<head>
<title>Eksperten</title>
<style type="text/css">

#fotografier {
    width: 100px;
    height: 100px;
    background-image: url('http://retard.dk/aif/images/design_01.jpg');
}
#fotografier:hover {
    width: 100px;
    height: 100px;
    background-image: url('http://retard.dk/aif/images/design_03.jpg');
}

</style>
</head>
<body>

<a id="fotografier" href="http://retard.dk/aif/fotografier.html"></a>

</body>
</html>

Problemet er bare at dette hellere ikke virker med den valgte DOCTYPE.
Avatar billede minus Nybegynder
12. november 2007 - 10:26 #11
Nielle> Hvilket doctype skal der bruges? Transitional?

----

Min kode ser således ud nu:


Style:
    #et{
        width: 401px;
            height: 215px;
          background-image: url('images/forside_01.jpg');
        float: left;
        cursor: pointer;
    #et:hover {
            width: 401px;
            height: 215px;
            background-image: url('images/forside2_01.jpg');
        }

   
XHTML:
<a id="et" href="fotografier.html"></a>

------

Men hover-effekten, kommer ikke.(...?)
Avatar billede nielle Nybegynder
12. november 2007 - 11:35 #12
Jeg gætter ud fra tidligere spørgsmål at det er deet site:

http://retard.dk/aif

- og derfor denne her:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Avatar billede nielle Nybegynder
12. november 2007 - 11:40 #13
Sorry, så ikke loge hvem der spurgte. :^)

Jeg er ikke XHTML ekspert, men jeg kan da se ud fra en hel del spørgsmål her på E t der ikke rigtihgt er nogen browsere som rent faktisk kan fortolke den endnu.

Olebole har et par artikler om det her:

http://www.eksperten.dk/artikler/537
http://www.eksperten.dk/artikler/538

Hvis det hverken virker med strict eller transitional, så får du det næppe til at fungere på den platform...
Avatar billede minus Nybegynder
13. november 2007 - 07:17 #14
nielle -->

Ud fra din kode blev resultatet således:


<a href="fotografier.html" id="et"></a>

    #et {
        background-image: url(images/forside_01.jpg);
        border: none;
        width: 401px;
        height: 215px;
        float: left;
    }

    #et:hover {
        background-image: url(images/forside2_01.jpg);
    }

Kan ikke se, hvad det store forskel er, fra det forrige. Men den virker fint med en transitional xhtml doctype.
Så hvis du vil, må du gerne smide et svar :)
Avatar billede nielle Nybegynder
13. november 2007 - 08:10 #15
Så synes jeg at der skal deles med extend for det var 11/11-2007 20:29:59 som bragte hover ind i billedet. :^)

... et svar fra mig. :^)
Avatar billede minus Nybegynder
13. november 2007 - 13:42 #16
Okay :) Så må extend også godt smide et svar.
Avatar billede Slettet bruger
14. november 2007 - 13:14 #17
Ok da. Et lille bitte var herfra. :-)
Avatar billede Slettet bruger
14. november 2007 - 13:14 #18
*UPS!* *GG*
Avatar billede minus Nybegynder
14. november 2007 - 13:19 #19
:)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:36 godt råd søges Alternativ styresystem på Mac pc Af luffe1955 i Andre styresystemer
I går 11:32 Hjælp til kontrol af sygefravær Af Maja i Excel
27/0113:59 2 skærme til en stationær computer Af BIRGER i Skærme
26/0119:26 Opstart af ny computer Af Bent i Windows
25/0120:06 Hjemmeside der virker både på mobil og computer Af Strawberry i PHP
White papers
Flere white papers »