oe kan ik een mouse over effect maken van mij afbeelding, en deze goed positioneren ?

djeric · 12 jan 2014

hallo.

ik wil een mouse over menu maken van steeds 2 verschillende afbeeldingen.
het moet een verticale menu worden die op alle type beeldschermen (tablet,telefoon,pc,laptop etc...) en alle soorten scherm resoluties goed wordt weer gegeven. d.w.z. dat de volledige scherm gevuld is met het menu, het liefst indien mogelijk zonder scroll balken.

Ik heb nu steeds 2 verschillende plaatjes. (.gif) en wil deze aan de linkerkant en aan de rechterkant plaatsen. en zo aan iedere kant 10 plaatjes onder elkaar. je krijgt dus dan 20 plaatjes op de webpagina te zien. elk plaatje op de pagina zelf moet het volgende bevatten:

* een mouse over effect. (naar een ander plaatje.gif)
* een link (ergens naar een des betreffende webpagina)
* een alt (stuk tekst als plaatje niet wordt getoond.)

Nu heb ik op internet veel gevonden hoe een mouse over effect te maken, en bel zelf al eens bezig geweest, maar meer met tekst dan met plaatjes.
en daarbij, komt de posities steeds niet uit.

hoe kan ik een mouse over effect maken van mij afbeelding, en deze goed positioneren ?

een getekende voorbeeld van wat ik wil:

oebiedoebie · 12 jan 2014

Dit kun je toch doen met CSS.
En dan het plaatje een class meegeven.

bron · 12 jan 2014

Mouse-over werkt niet bij een touch screen (mobiles/tablets)

Ik denk dat je dan 'home' op je scherm kunt tonen en dat het menu openklapt bij een mouse click/touch (en eventueel bij mouse-over)?

**edit
Zie voorbeeld

oebiedoebie · 12 jan 2014

Een mouseover werkt toch nooit op een tabel of mobile?

djeric · 12 jan 2014

oebiedoebie zei:
Dit kun je toch doen met CSS.

maar vat hem niet hoe........

wat is de beste methode?

oebiedoebie · 12 jan 2014

Dit script gebruik meestal:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script language="JavaScript">
if (document.images) { 
plaatje1on = new Image(); 
plaatje1on.src = "afbeelding2.jpg"; 
  
plaatje1off = new Image(); 
plaatje1off.src = "afbeelding1.jpg"; 
  
} 
  function muisop(imgname) { 
if (document.images) { 
document[imgname].src = eval(imgname + 'on.src'); 
} 
}   
function muisaf(imgname) { 
if (document.images) { 
document[imgname].src = eval(imgname + 'off.src'); 
}} 
</script>
</head>



<body>
 <div align="center"><A HREF="link.php" target="_parent" onMouseover="muisop('plaatje1'); return true" onMouseout="muisaf('plaatje1');"> <IMG SRC="plaatje1.jpg" NAME="plaatje1" ALT="home" WIDTH="200" HEIGHT="70" BORDER=0></A></div>
</div>
</body>
</html>

bron · 12 jan 2014

Een mouseover werkt toch nooit op een tabel of mobile?

Binnenkort leverbaar op de Samsung S serie !!! En de generatie mobiles daarna ook.

djeric · 13 jan 2014

oebiedoebie zei:
Dit script gebruik meestal:

ja zoiets.

alleen dan nog de posities bepalen. het menu moet zowel aan de linkerlant en aan de rechter kant komen. beide bevatten dus 10 plaatjes, met een link.
en moeten gecentreerd staan in verticale richting wat beste werkt voor verschillende scherm resoluties.

ik krijg hem wel links of rechts, maar niet dat het blijft staan als een kleinere scherm resolutie wordt gebruikt.

bron · 13 jan 2014

Maak van de drukknop een vierkant plaatje.jpg

Code:

<div id="menu">
<ul>
<li><a><span>Menutekst 1</span></a></li>
<li><a><span>Menutekst 2</span></a></li>
</ul>
</div>

#menu li {
  width: 100%;
  background: url(plaatje.jpg) no-repeat top left;
}
#menu a {
width: 100%;
background: url(plaatje.jpg) no-repeat top right;
}

djeric · 14 jan 2014

bron zei:
Maak van de drukknop een vierkant plaatje.jpg

maar waarom een vierkant?

de menu knop is een afbeelding die ik heb.
ik wil deze 10 stuks links onder elkaar plaatsen. en 10 stuks rechts onder elkaar.

voorheen had ik alleen dit:

HTML:

<ul class="navigatie">
<li><a href="index.html" title="home"><img src="index/a.gif" ALT="" width="150" height="56"></a></li>  
<li><a href="informatie.html" title="informatie"><img src="index/b.gif" ALT="" width="150" height="56"></a></li>  
<li><a href="drankjes.html" title="apresski drankjes"><img src="index/n.gif" ALT="" width="150" height="56"></a></li> 
<li><a href="artiesten.html" title="artiesten"><img src="index/d.gif" ALT="" width="150" height="56"></a></li>  
<li><a href="dj.html" title="dj's"><img src="index/g.gif" ALT="" width="150" height="56"></a></li> 
<li><a href="feestje.html" title="uw apresski feest"><img src="index/t.gif" ALT="" width="150" height="56"></a></li>
<li><a href="skihut.html" title="skihut nederland"><img src="index/f.gif" ALT="" width="150" height="56"></a></li>  
<li><a href="buitenland.html" title="skihut buitenland"><img src="index/i.gif" ALT="" width="150" height="56"></a></li> 
<li><a href="cd.html" title="apresski cd's"><img src="index/j.gif" ALT="" width="150" height="56"></a></li> 
<li><a href="http://www.webhelpje.nl/forum/forum.php?name=skihutinfo" title="skihut forum"><img src="index/h.gif" ALT="" width="150" height="56"></a></li>   
</ul>

<ul class="navigatie rechts">
<li><a href="evenementen.html" title="evenementen"><img src="index/l.gif" ALT="" width="150" height="56"></a></li>  
<li><a href="toer.html" title="skihut on toer"><img src="index/m.gif" ALT="" width="150" height="56"></a></li>  
<li><a href="vacatures.html" title="vacatures"><img src="index/e.gif" ALT="" width="150" height="56"></a></li> 
<li><a href="drivein.html" title="drive in show's"><img src="index/p.gif" ALT="" width="150" height="56"></a></li> 
<li><a href="sponsers.html" title="apresski sponsers"><img src="index/o.gif" ALT="" width="150" height="56"></a></li>   
<li><a href="javascript:void(0)" onclick="open('http://skihutfm.listen2myradio.com','miniwin','width=915,height=305')" title="muziek speler"><img src="index/q.gif" ALT="" width="150" height="56"></a></li> 
<li><a href="http://www.skihutinfo.nl" title="downloads"><img src="index/k.gif" ALT="" width="150" height="56"></a></li>  
<li><a href="http://www.skihutinfo.nl" title="gastenboek"><img src="index/r.gif" ALT="" width="150" height="56"></a></li>  
<li><a href="http://www.skihutinfo.nl" title="links"><img src="index/s.gif" ALT="" width="150" height="56"></a></li>  
<li><a href="mailto:infomy@ziggo.nl" title="contact"><img src="index/c.gif" ALT="" width="150" height="56"></a></li>  
</ul>

en mij css:

Code:

div#menu  { 

border : 0; 
} 
 ul.navigatie  { 

font-family : verdana, Arial, Helvetica, sans-serif; 

font-size : 14px; 

font-weight : bold; 

width : 12em; 

border-right : 1px solid #666; 

padding : 0; 

background-color : #9cc; 

color : #333; 

list-style : none; 

float : left; 

margin-top : 0; 

margin-right : 10px; 

margin-bottom : 1em; 

margin-left : 0; 
} 
 ul.rechts  { 

float : right; 

margin : 0 0 1em 10px; 
} 
 ul.navigatie li  { 

margin : 0; 

border-top : 1px solid #003; 
} 
 ul.navigatie li a  { 

display : block; 

padding : 2px 2px 2px 4px; 

border-left : 10px solid #993300; 

border-right : 1px solid #69c; 

border-bottom : 1px solid #369; 

background-color : #ffffff; 

text-decoration : none; 

width : 100%; 
} 
 ul.rechts  { 

margin : 0 0 1em 10px; 
} 
 html > body ul.navigatie li a  { 

width : auto; 
} 
 ul.navigatie li a:hover  { 

border-left : 10px solid #006600; 

border-right : 1px solid #69c; 

border-bottom : 1px solid #369; 

background-color : #FFFFCC; 

color : #ff1493; 
} 
 .navigatie li img  { 

border : 0; 
}

bron · 14 jan 2014

Vierkant plaatje omdat je van tevoren niet de resolutie weet van het scherm van de bezoeker. Werk daarom met percentages. Geef de <div><ul> van het menu ook een breedte van 100% (of minder als je het menu minder breed wilt hebben).

In het voorbeeld hierboven is de hoogte/breedte van <a> en <li> hetzelfde.

#menu li {
width: 100%;
background: url(plaatje.jpg) no-repeat top left; /* knop-plaatje links tonen */
}
#menu a {
width: 100%;
background: url(plaatje.jpg) no-repeat top right; /* knop-plaatje rechts tonen */
}

<span>Tekst</span> is in jouw geval niet nodig.

djeric · 15 jan 2014

bron zei:
<span>Tekst</span> is in jouw geval niet nodig.

ok nu ben ik dus kwijt wat in me html komt te staan volledig, en in me css volledig.

hoe heb jij hem nu dan staan????

want nu krijg ik een <li> oftewel een . (puntje) voor ieder plaatje. en geen mouse over effect meer.

bron · 15 jan 2014

Bekijk de code hieronder (zet eventueel even in een apart bestand)

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="nav links">
  <ul class=" menu">
    <li><a href="#" title="tekst"><img src="button.png" alt="" /></a></li>
    <li><a href="#" title="tekst"><img src="button.png" alt="" /></a></li>
    <li><a href="#" title="tekst"><img src="button.png" alt="" /></a></li>
    <li><a href="#" title="tekst"><img src="button.png" alt="" /></a></li>
  </ul>
</div>
<div class="nav rechts">
  <ul class=" menu">
    <li><a href="#" title="tekst"><img src="button.png" alt="" /></a></li>
    <li><a href="#" title="tekst"><img src="button.png" alt="" /></a></li>
    <li><a href="#" title="tekst"><img src="button.png" alt="" /></a></li>
    <li><a href="#" title="tekst"><img src="button.png" alt="" /></a></li>
  </ul>
</div>
</body>
</html>

style:css:

/* wat algemene zaken (reset) */
html,body,div,ul,li,a,img {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
a {
	cursor:pointer;
}
a:active, a:focus {
	outline:0;
	outline-style:none;
	outline-width:0;
}

/* float kun je overal gebruiken waar nodig */
.links {
	float: left;
	display: inline;
}
.rechts {
	float: right;
	display: inline;
}

/* universele class 'menu' -> niet wijzigen!! */
.menu {
	margin:0; padding:0; list-style-type:none;
	position:relative; z-index:597; float:left; }
.menu ul, .menu li {
	margin:0; padding:0; list-style-type:none; }
.menu li {
	float:left; line-height:1em; vertical-align:middle; }
.menu li:hover {
	position:relative; z-index:599; cursor:default; }
.menu a, .menu span {
	display:block; text-decoration:none; }
.menu ul {
	visibility:hidden; position:absolute; top:100%; left:0;
	z-index:598; margin-top:0; }
.menu ul li {
	float:none; }
.menu ul ul {
	top:1px; left:99%; }
.menu li:hover > ul {
	visibility:visible; }

/* hoeronder kun je het menu styling geven */
.menu {
	/* plaatje is 83px breed */
	width: 83px;
}
.menu li,
.menu a {
	background: transparent;
}
.menu a:hover {
  /* android 2.1+, chrome 4+, firefox 2+, ie 9+, ios 3.2+, opera 9+, safari 3.1+ */
  opacity: 0.5;
}

ul.menu img {
	/* transparant png plaatje is 83x33 px */
}

Voorbeeld van button zit in de bijlage.

djeric · 16 jan 2014

bron zei:
Bekijk de code hieronder (zet eventueel even in een apart bestand)

dus als ik het goed begrijp is het menu met behulp van float op zijn plaats gezet en met ul tags het menu bewerkt voor mouse over effects?

maar snap deze code niet:

HTML:

html,body,div,ul,li,a,img {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

is de regel: html,body,div,ul,li,a,img samengevoegd?
ik dacht het allemaal apart moest.

bron · 16 jan 2014

a) Deze code is een klein stukje uit een css reset. Het is belangrijk dat je als eerste een "reset" in je css zet. Dit om ervoor te zorgen dat kleine verschillen in browsers worden weggehaald. Daardoor ziet je website er meer hetzelfde uit op de diverse browsers. Je vindt enkele reset's op pagina http://www.cssreset.com . Probeer Eric Meyers reset eens.

b) Met een komma kun je merdere tag'ss, id's en classes allemaal dezelfde css eigenschappen geven. Zodoende hoef je niet dezelfde css telkens opnieuw in te typen.
Voorbeeld:
img, p.header, #container, ul li.current {
background-color: #00f;
}

***aanvulling
c) Met float:left en float:right zijn de 2 menu's links en rechts gezet. Een mouse-over wordt gedaan met :hover
In de code is dit: .menu a:hover { ..... }

djeric · 16 jan 2014

bron zei:
a) Deze code is een klein stukje uit een css reset. Het is belangrijk dat je als eerste een "reset" in je css zet. Dit om ervoor te zorgen dat kleine verschillen in browsers worden weggehaald.

dus net zoiets als dat ik bv:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">

in me html code zet bovenaan?

dus heb ik een strict voor me html code, en een reset voor mij css code?

bron · 16 jan 2014

Met de <!doctype> (altijd 1e html regel) weet de browser om wat voor document het gaat. HTML 5 en XHTML 1.0 Transitional worden het meest gebruikt. Bij Strict mag je geen opmaak tags of verouderde tags in je html gebruiken! http://www.w3schools.com/tags/tag_doctype.asp

Een css reset haalt verschillen weg in weergave op verschillende browsers (Chrome, Firefox, Int.Explorer, Opera, Safari, enz.). In de bijlage heb ik een gecombineerde reset met default settings gezet. Een reset altijd boven je eigen stylesheet zetten in <head>.

Code:

<link rel="stylesheet" type="text/css" href="reset-default.css" />
<link rel="stylesheet" type="text/css" href="style.css" />

Doctype en css reset zijn beide noodzakelijk voor een goede werking.

**aanvulling:
Strict en Transitional (DTD) horen bij html 4 en xhtml 1.
In html 5 wordt alleen maar <!DOCTYPE html> gebrukt.

djeric · 18 jan 2014

ik heb de volgende code in me css staan:

Code:

/* wat algemene zaken (reset) */
html,body,div,ul,li,a,img {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
a {
	cursor:pointer;
}
a:active, a:focus {
	outline:0;
	outline-style:none;
	outline-width:0;
}

/* float kun je overal gebruiken waar nodig */
.links {
	float: left;
	display: inline;
}
.rechts {
	float: right;
	display: inline;
}

/* universele class 'menu' -> niet wijzigen!! */
.menu {
	margin:0; padding:0; list-style-type:none;
	position:relative; z-index:597; float:left; }
.menu ul, .menu li {
	margin:0; padding:0; list-style-type:none; }
.menu li {
	float:left; line-height:1em; vertical-align:middle; }
.menu li:hover {
	position:relative; z-index:599; cursor:default; }
.menu a, .menu span {
	display:block; text-decoration:none; }
.menu ul {
	visibility:hidden; position:absolute; top:100%; left:0;
	z-index:598; margin-top:0; }
.menu ul li {
	float:none; }
.menu ul ul {
	top:1px; left:99%; }
.menu li:hover > ul {
	visibility:visible; }

/* hoeronder kun je het menu styling geven */
.menu {
	/* plaatje is 83px breed */
	width: 83px;
}
.menu li,
.menu a {
	background: transparent;
}
.menu a:hover {
  /* android 2.1+, chrome 4+, firefox 2+, ie 9+, ios 3.2+, opera 9+, safari 3.1+ */
  opacity: 0.5;
}

ul.menu img {
	/* transparant png plaatje is 83x33 px */
}

maar snap 2 dingen niet.

1= met float wordt de positie left en right geplaatst.
maar bekijk ik het voorbeeld in me browser, dan staat rechts bijna buiten beeld. dat mag niet. hij moet in beeld blijven.
nu heb ik geprobeerd om bij de .rechts ook de code te plaatsen:

Code:

padding: 0 30px;

bekijk ik deze opnieuw. dan werkt het wel... die 0 geeft de positie van boven naar beneden weer. (dus in dit geval positioneert deze helemaal aan top)
en die 30px geeft de positie van links naar rechts. is dit dan juist om deze padding tag te plaatsen?

2= waarom krijg ik bij een mouse over een transparante afbeelding? ik zie in de css staan:

.menu a {
background: transparent;
}

moet i.pv. transparant dan staan: naamnaarafbeelding.png ??????

edit:

djeric zei:
een getekende voorbeeld van wat ik wil:

Bekijk bijlage 201853

bron · 19 jan 2014

1) Ik heb alleen het menu in een apart bestand gemaakt maar niet gekeken naar je omliggende html code. In de omliggende html code kun je meer over de positie bepalen. Dit gebeurt met margin, padding, of andere css.

2) De mouse-over krijg je met :hover
.menu a:hover {
opacity: 0.5; /* waarde 0.0 ~ 1.0 */
}

De code
.menu li, .menu a {
background: transparent;
}
is om ervoor te zorgen dat je de planken achtergrond door de .png drukknoppen ziet.

***aanvulling
padding: 0 30px; is hetzelfde als padding: 0 30px 0 30px; (top en bottom: 0px , left en right: 30px)

bron · 19 jan 2014

Een aanvulling
- de achtergrond blijft schermvullend.
- een voorbeeld met tekst in het plaatje (linker menu).
- een voorbeeld met echte tekst op het plaatje (rechter menu).
In de zip zitten stylesheet en plaatjes.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="achtergrond">
  <img src="achtergrond.jpg" alt="" />
</div>

<div id="menuwrapper">

<div class="links">
  <ul class=" menu">
    <li><a href="#" title="Members"><img src="button1.png" alt="" /></a></li>
    <li><a href="#" title="Members"><img src="button1.png" alt="" /></a></li>
    <li><a href="#" title="Members"><img src="button1.png" alt="" /></a></li>
    <li><a href="#" title="Members"><img src="button1.png" alt="" /></a></li>
  </ul>
</div>

<div class="rechts">
  <ul class=" menu">
    <li><a href="#" title="Members"><span>Members</span></a></li>
    <li><a href="#" title="Members"><span>Members</span></a></li>
    <li><a href="#" title="Members"><span>Members</span></a></li>
    <li><a href="#" title="Members"><span>Members</span></a></li>
  </ul>
</div>

</div> <!--/menuwrapper-->

</body>
</html>

oe kan ik een mouse over effect maken van mij afbeelding, en deze goed positioneren ?

Gebruiker

Gebruiker

Moderator

Gebruiker

Gebruiker

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Moderator

Wij waarderen jouw privacy