Menu met rollover image probleem Dreamweaver

dinsdag 22 juli 2014 @ 10:55:27 #1

blokzeil1

Hallo!

Omdat ik afgelopen 2 weken goed ziek ben en ik me normale werk niet kan doen probeer ik onze website te vernieuwen en ben begonnen met een kaal documentje,
nu ben ik erg nieuw in html maar het is boeiend

Nu heb ik het volgende probleem, ik wil een rollover/swap image gebruiken in mijn menu links mijn vraag is wat is de beste manier hiervoor?
Ik heb veel oplossingen gezien maar mijn afbeelding geeft me een handicap omdat het om een transparante afbeelding is.
heb veel zelf gerommeld maar kom er niet uit.

En als de image werkt zoek ik nog een oplossing om text te centeren in de image...

En Als er eventuele fouten of opmerkingen zijn laat het me graag weten!

Hier mijn Html & CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nieuwe site</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
</script>
</head>
<body>
<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '{XXXXXXXXXXX}',
          xfbml      : true,
          version    : 'v2.0'
        });
      };

      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<div id="outside_wrapper">
  <div class="Header"><img src="Images/Banner.jpg" width="2000" height="350" alt="banner"></div>
</div>

<div id="wrapper">
  <div id="center">
    <div id="left">
      <div id="menu">
        <ul class="menu">
            <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu','','Images/menu/menuvimage2.gif',1)"><img src="Images/menu/menuimage1.gif" width="150" height="83"></a></li>
                        <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu','','Images/menu/menuvimage2.gif',1)"><img src="Images/menu/menuimage1.gif" width="150" height="83"></a></li>
                        <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu','','Images/menu/menuvimage2.gif',1)"><img src="Images/menu/menuimage1.gif" width="150" height="83"></a></li>

                </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

@charset "utf-8";

#htm, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../Images/background.jpg);
    background-repeat:repeat;

}

#outside_wrapper #Header {
    width: 100%;
    background-repeat: no-repeat;
    background-size: auto;
}
#wrapper {
    width: 1600px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 20px;
    margin 0 auto -200px;
}

#wrapper #center {
    padding-top: 50px;
    height: 1500px;
    width: 1500px;
}

#wrapper #center #contain {
    height: 1200px;
    width: 800px;
    float: left;
    display: block;
    overflow: hidden;
    position:relative;
    margin-right: 10px;
    background-image: url(../Images/text%20menu.png);
    background-repeat: repeat-x;
    padding-top: 0px;
}

#wrapper #center #menuright {
    height: 1200px;
    width: 350px;
    display:block;
    position: relative;
    overflow:hidden;

}
#wrapper #center #menuright #Fbbox {
    height: 620px;
    display: block;
    position: relative;
    padding-top: 50px;
    display: block;
    overflow:hidden;
    background-image: url(../Images/text%20menu.png);
}

#wrapper #center #menuright #Fbbox .fb-like-box {
    width: 330px;
    height: 500px;
    left: 10px;
    position:relative;
}
#wrapper #center #menuright #fbcommandbox {

}
#wrapper #center #menuright #sisopbezoek {
    position: relative;
    height: 400px;
    margin-top: 40px;
    display: block;
    background-image: url(../Images/text%20menu.png);
}

#wrapper #center #left {
    height: 950px;
    width: 180px;
    float: left;
    margin-right: 30px;
    display:block;
    position:relative;
}

#wrapper #center #left #menu {
    height: 950px;
    width: 180px;
    float: left;
    padding-top: 30px;
    background-image: url(../Images/text%20menu.png);
    background-repeat: repeat-x;
}

#left #menu .menu {
    list-style: none;
    padding-left: 20px;

}
#left #menu .menu li  {

}

#left #menu .menu li a img {
}
#wrapper #menutop {
    height: 100px;
    width: auto;
}
#footer {
    background-color: #3C0;
    position: relative;
    margin-top: -50px;
    height: 50px;
    clear: both;
    bottom:0;
}

.centerimage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    position: relative;

}

.divcenter {
    margin-left: auto;
    margin-right: auto;
    width: 8em;
}
.textcenter {
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
}
.textmenu {
    position: absolute;
    margin: auto;
    display: block;
    vertical-align: middle;

}
h1 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 25px;
    margin-top: 5px;
}

dinsdag 22 juli 2014 @ 11:06:03 #2

InsaneM666

Dit is eigenlijk vrij simpel te realiseren middels CSS. Dan knal je een background-image op de anchor, dus het linkje, en vervolgens geef je op de hover state andere properties.

Het makkelijkste is een kleine sprite maken (dus meerdere afbeeldingen in 1 afbeelding) en dan schuiven. Dus dan krijg je bijvoorbeeld:

a {
display: block;
height: 25px;
width: 100px;
background-image: url(images/jeplaatje.png);
background-repeat: no-repeat;
background-position:top left;
text-align: center;
line-height: 25px;
}

a:hover {
background-position:0px -100px;
}

Wat betreft de tekst. De text-align:center; zorgt ervoor dat de tekst gecentreerd wordt en de line-height zorgt ervoor dat de text verticaal ook in het midden staat. De regelhoogte is gelijk aan de totale hoogte van het element.

dinsdag 22 juli 2014 @ 11:09:31 #3

InsaneM666

Persoonlijk hou ik niet zo van Dreamweaver want de code wordt er vaak zo vies van. Maar als je verder geen ervaring hebt met html/css is het zeker een leuk begin. Maar probeer ook resources als stackoverflow (voor vragen over hoe dingen te gebruiken) en w3schools (naslag voor elementen) erbij te houden om de code een beetje te leren lezen, dat scheelt een hoop

Dus ik kan niet echt inhoudelijk ingaan op de code want het blijft editor code. Maar 1 ding wil ik wel even meegeven, sluit netjes de body af met </body> en daarna netjes de html met </html>. Die twee tags moeten altijd als laatste in je document staan wat betreft html.

dinsdag 22 juli 2014 @ 11:21:12 #4

blokzeil1

quote:
Op dinsdag 22 juli 2014 11:09 schreef InsaneM666 het volgende:
Persoonlijk hou ik niet zo van Dreamweaver want de code wordt er vaak zo vies van. Maar als je verder geen ervaring hebt met html/css is het zeker een leuk begin. Maar probeer ook resources als stackoverflow (voor vragen over hoe dingen te gebruiken) en w3schools (naslag voor elementen) erbij te houden om de code een beetje te leren lezen, dat scheelt een hoop

Dus ik kan niet echt inhoudelijk ingaan op de code want het blijft editor code. Maar 1 ding wil ik wel even meegeven, sluit netjes de body af met </body> en daarna netjes de html met </html>. Die twee tags moeten altijd als laatste in je document staan wat betreft html.

Tuurlijk gebruik ik /html en /body

maar het is een klein deel van de code zegmaar,

Verder kom ik er niet helemaal uit,
Probleem blijft toch met een hover dat de oude background met mouseover nog gezien word omdat de nieuwe afbeelding een beweging doet zie je de default van de oude afbeelding er achter...

Moeilijk uit te leggen

dinsdag 22 juli 2014 @ 11:23:11 #5

donroyco

dus niet Donroyco

Centraal topic: DIG / [HTML, CSS, JS] Frontend #41: De Node is hoger

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

dinsdag 22 juli 2014 @ 11:27:34 #6

InsaneM666

quote:
Op dinsdag 22 juli 2014 11:21 schreef blokzeil1 het volgende:

[..]

Tuurlijk gebruik ik /html en /body maar het is een klein deel van de code zegmaar,

Verder kom ik er niet helemaal uit,
Probleem blijft toch met een hover dat de oude background met mouseover nog gezien word omdat de nieuwe afbeelding een beweging doet zie je de default van de oude afbeelding er achter...

Moeilijk uit te leggen

Ja ik snap m niet helemaal

dinsdag 22 juli 2014 @ 11:35:05 #7

blokzeil1

je zou het kunnen vergelijken met,
Afbeelding 1: man met hoed op

Afbeelding 2: Man zonder hoed op.

Dus met mouseover blijf je de hoed zien.

dinsdag 22 juli 2014 @ 11:42:16 #8

InsaneM666

Dan zou ik het zo doen:

HTML:

<ul>
<li><a href="/link/" class="menu_button">link</a></li>
</ul>

CSS:
a.menu_button {
background-image:url(/images/hoedje_op.png);
}
a.menu_button:hover {
background-image:url(/images/hoedje_af.png);
}

Als je het zo doet verwisselt hij de afbeelding, dus kan je nooit hoedje op nog zien als je met je muis over de image gaat, want hij swapt dan naar hoedje af.

Mooiste is dan als je hoedje op en hoedje af strak naast elkaar zet in 1 image, en de image dan verschuift bij de hover state.

dinsdag 22 juli 2014 @ 11:47:20 #9

donroyco

dus niet Donroyco

quote:
Op dinsdag 22 juli 2014 11:42 schreef InsaneM666 het volgende:
Dan zou ik het zo doen:

HTML:

<ul>
<li><a href="/link/" class="menu_button">link</a></li>
</ul>

CSS:
a.menu_button {
background-image:url(/images/hoedje_op.png);
}
a.menu_button:hover {
background-image:url(/images/hoedje_af.png);
}

Als je het zo doet verwisselt hij de afbeelding, dus kan je nooit hoedje op nog zien als je met je muis over de image gaat, want hij swapt dan naar hoedje af.

Mooiste is dan als je hoedje op en hoedje af strak naast elkaar zet in 1 image, en de image dan verschuift bij de hover state.

Slechte uitwerking, want hij moet een nieuwe serverrequest doen om het tweede plaatje op te halen. Beter is om een sprite te maken, dan hoef je maar een afbeelding op te halen. Voorbeeld: http://jsfiddle.net/videsignz/eAp2H/

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

dinsdag 22 juli 2014 @ 11:48:31 #10

InsaneM666

quote:
Op dinsdag 22 juli 2014 11:47 schreef donroyco het volgende:

[..]

Slechte uitwerking, want hij moet een nieuwe serverrequest doen om het tweede plaatje op te halen. Beter is om een sprite te maken, dan hoef je maar een afbeelding op te halen.

Joh. Dat zeg ik ook. Ik heb bovenstaande even uitgewerkt ter illustratie hoe de hover werkt.

dinsdag 22 juli 2014 @ 15:20:13 #11

blokzeil1

Hmm volgens mij ben ik er bijna, netjes die 2 afbeeldingen een .png van gemaakt etc.

heb het volgende:

1 2	<ul class="menu"> <li><a href="#" class="menuknop">Test</a></li>

1
2
3
4
5
6
7
8
9
10
11
12

.menuknop {
    width:150px;
    height:88px; /* helft van image*/
    display:block;
    background-image:url(../Images/menu/menuvarken.png);
    background-repeat:none;
    background-position: left bottom;
    cursor:pointer;
}

.menuknop: hover {
    background position: left top;

Maar hij laad etc maar de hover doet weinig...

dinsdag 22 juli 2014 @ 15:25:35 #12

kree

probeer iets hier en gebruik dat als voorbeeld
http://www.cssportal.com/css3-menu-generator/

Do what you love, love what you do!

dinsdag 22 juli 2014 @ 17:26:24 #13

blokzeil1

quote:
Op dinsdag 22 juli 2014 15:25 schreef kree het volgende:
probeer iets hier en gebruik dat als voorbeeld
http://www.cssportal.com/css3-menu-generator/

Hmm gekeken maar vind ik niet echt wat ik nodig heb...

dinsdag 22 juli 2014 @ 17:33:21 #14

kree

quote:
Op dinsdag 22 juli 2014 17:26 schreef blokzeil1 het volgende:

[..]

Hmm gekeken maar vind ik niet echt wat ik nodig heb...

Of een andere site vinden die hetzelfde doet en het daarvan afkijken.

Do what you love, love what you do!

dinsdag 22 juli 2014 @ 17:36:43 #15

blokzeil1

quote:
Op dinsdag 22 juli 2014 17:33 schreef kree het volgende:

[..]

Of een andere site vinden die hetzelfde doet en het daarvan afkijken.

Probleem is ben der al een tijdje mee aan t stoeien

en natuurlijk kijk ik verder dan me neus lang is!

dinsdag 22 juli 2014 @ 19:54:28 #16

Darkomen

De CSS oplossing met sprite zoals al twee keer vermeld is is de juiste oplossing.
Hier is geen javascript voor nodig.

Forum Opties
Forumhop:
Hop naar:	(afkorting, bv 'KLB')

» digital corner

» netwerken en internet

» digital corner

» netwerken en internet