CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

Smorkongen Nybegynder

25. september 2011 - 17:44 Der er 13 kommentarer og
1 løsning

Hover

Er der nogle der kan hjælpe en nybegynder med at lave en rollover.

Jeg bruger DW og her kan man indsætte en "rollover", hvor der bruges JavaScript. Dog skal begge billeder/knapper være lige store.

Kan det ikke gøres på en bedre måde ? og hvor billedet som popper up. kan placeres andre steder ?

info: Skal bruge det til min hovednavigations menu.

takker

Synes godt om

kjeldsted Novice

25. september 2011 - 18:07 #1

Det nemmeste er nok at benytte en hover i CSS.

Hvis du fx. har en class der hedder menu, kan du laver en klasse der hedder menu:hover.

.menu {
background-image:url('menu.png') }
.menu:hover {
background-image:url('menu_hover.png')
}

Synes godt om

olebole Juniormester

25. september 2011 - 18:12 #2

<ole>

- og jeg ville mene, at JS er den mest realistiske løsning. Specielt, når billedet, som popper op, skal vises et helt andet sted =)

@Smorkongen: Det er ikke til at sige, hvad du skal gøre. Læg et link til siden og forklar, hvad du præcist ønsker

/mvh
</bole>

Synes godt om

kjeldsted Novice

25. september 2011 - 19:04 #3

Hovsa. Du har vist ret ole. :) Overså jeg helt.

Hvad mener du præcist med at den skal være et andet sted?

Synes godt om

Smorkongen Nybegynder

25. september 2011 - 19:05 #4

"kjeldsted"
jeg vil prøve nedenstående, men kunne du vise hvordan jeg skal sætte html op til dette?

.menu {
background-image:url('menu.png') }
.menu:hover {
background-image:url('menu_hover.png')
}

"bole"
Har kun lige et screenshop fra Ps.
Men "boksen" som skal ligge under menuerne skal have en forskellig størrelse, hvis det har betydning.

http://screencast.com/t/jp7rpvIuHN

Synes godt om

kjeldsted Novice

25. september 2011 - 20:11 #5

Der skal naturligvis også indsættes noget højde/bredde osv. i CSS'en.

Men som ole pointere, skal vi faktisk over i JS hvis hover billedet skal være et andet sted.

Selvom jeg dog ud fra dit screenshot ikke synes at kunne se billedet skifter placering.

Synes godt om

kjeldsted Novice

25. september 2011 - 20:12 #6

Og så skal der jo lave to css klasser til hvert menupunkt, samt to stk. div til hvert menu punkt.

Synes godt om

olebole Juniormester

25. september 2011 - 20:43 #7

Det kan nu godt lade sig gøre med CSS alene - selvom jeg ikke er vild tilhænger af det =)

Jeg plejer at gennemgå to filer i stil med disse med mine webintegrator elever på Teknisk Skole:

HTML dokument:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vandret dropdown menu med CSS 2.1</title>
<link rel="stylesheet" type="text/css" href="dropdown_horz.css">
</head>
<body>

<h2>Vandret dropdown menu med CSS 2.1</h2>

<ul class="menu">
    <li><div>Menu #1</div>
        <ul>
            <li><a href="#">Emne 1_1</a></li>
            <li><a href="#">Emne 1_2</a></li>
            <li><a href="#">Emne 1_3</a></li>
            <li><a href="#">Emne 1_4</a></li>
        </ul>
    </li>
    
    <li><div>Menu #2</div>
        <ul>
            <li><a href="#">Emne 2_1</a></li>
            <li><a href="#">Emne 2_2 (bredt emne)</a></li>
            <li><a href="#">Emne 2_3</a></li>
        </ul>
    </li>
    
    <li><div>Menu #3</div>
        <ul>
            <li><a href="#">Emne 3_1</a></li>
            <li class="sub_menu"><a href="#">Emne 3_2</a>
                <ul>
                    <li>Emne 3_2_1</li>
                    <li>Emne 3_2_2</li>
                    <li>Emne 3_2_3</li>
                </ul></li>
            <li><a href="#">Emne 3_3</a></li>
            <li><a href="#">Emne 3_4</a></li>
            <li><a href="#">Emne 3_5</a></li>
        </ul>
    </li>
    
    <li><div>Menu #4</div>
        <ul>
            <li><a href="#">Emne 4_1</a></li>
            <li><a href="#">Emne 4_2</a></li>
            <li><a href="#">Emne 4_3</a></li>
        </ul>
    </li>
</ul>

</body>
</html>

dropdown_horz.css:


body {
    font: 80% verdana, sans-serif;
}

ul.menu {
    background: #359;
    display: inline-block;
}
ul.menu,
ul.menu ul,
ul.menu ul ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.menu li {
    display: inline-block;
    background: #006699;
    color: white;
    vertical-align: top;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}
ul.menu li:hover {
    overflow: visible;
}
ul.menu li div {
    padding: 2px 10px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
ul.menu ul,
ul.menu ul ul {
    position: absolute;
    padding: 1px;
    background: #015c8a;
}
ul.menu ul li {
    display: list-item;
}
ul.menu a,
ul.menu a:visited {
    text-decoration: none;
    display: block;
    padding: 2px 15px 3px 10px;
    background: #8ac5c5;
    color: #006699;
}
ul.menu a:hover {
    background: #015c8a;
    color: #8ac5c5;
}

ul.menu ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}
ul.menu .sub_menu:hover {
    overflow: visible;
}

Synes godt om

Smorkongen Nybegynder

25. september 2011 - 22:49 #8

Er stadig lidt i tvivl om html'en.
Du vil have to classes per punkt ?
Gider du vise mig det, og hvor href: skal placeres ?

.one {
background-image: url(../images/one.png);
height: 43px;
width: 117px;

}
.one:hover {
background-image: url(../images/two.png);
height: 43px;
width: 130px;
cursor: pointer;
}

Synes godt om

olebole Juniormester

25. september 2011 - 22:56 #9

Det forstod jeg ikke

Synes godt om

Smorkongen Nybegynder

26. september 2011 - 11:27 #10

Jeg har fået "knappen" til at hover som jeg ville have den. Dog linker den ikke endnu.

Hvorhenne skal jeg placerer "linket"?. Håber du forstår hvad jeg mener.

Dette er hvad jeg har,viker fint når jeg "hover" over knappen.
.one {
background-image: url(../images/one.png);
height: 43px;
width: 117px;

}
.one:hover {
background-image: url(../images/two.png);
height: 43px;
width: 130px;
cursor: pointer;
}

HTML ??? hvordan skal jeg linke til mine sider ?
Og kjeldsted nævnte at jeg skulle have to classer per "knap"(forstår jeg ikke helt) ??

<div class="one"></div> ???

Synes godt om

kjeldsted Novice

26. september 2011 - 17:42 #11

Du har jo to stk. "klasser" pr. Én der hedder .one og en der hedder .one:hover

Synes godt om

Smorkongen Nybegynder

28. september 2011 - 15:52 #12

okay, blev lige i tvivl om der skulle to klasser i html. :D tak for hjælpne

Synes godt om

kjeldsted Novice

28. september 2011 - 17:42 #13

Så lidt :)

Synes godt om

mads375 Juniormester

25. december 2011 - 13:35 #14

Lukketid?

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS