Help, Rollover probleem

**Jelle de Jong** · 04-05-2009, 16:31

Hey allemaal,

ik zit met nog een probleempje.
Ik probeer een menuknoppen te maken die van lengte veranderen als ik er op richt met mn muis.
M'n rollover/mousover image is dus langer dan het origineel.
De image waar deze knop op staat heb ik als background ingesteld, zo verwachte ik dat de mouseover image gewoon langer werd over de background heen.
maar dat doet hij niet, omdat hij langer wordt duwt hij de background naar beneden.

hoe zorg ik ervoor dat de mouseover image langer wordt over de background heen, dus dat de background op zijn plaats blijft terwijl de image eroverheen langer wordt.

mvg,

Jelle de Jong

**René Vennik** · 04-05-2009, 16:45

Als je er overheen gaat de margin negatief instellen.

**gast2960** · 04-05-2009, 16:50

heb je hier misschien een voorbeeld bij?

**Jelle de Jong** · 04-05-2009, 17:01

wacht even hoor dat margin gaat mij even te snel, ik ben nog vrij nieuw in het hele html css gebeuren.
Ik kan wel alles vinden hoor dus als je zegt waar ik iets moet plaatsen lukt dat wel.

de afbeeldingen,

afbeeldig 3 is als ik er niet met mn muis op sta.
afbeelding 6 is als ik er wel met mn muis op sta.

Ik hoop dat dit genoeg duidelijkheid geeft.

Groetjes,

Jelle

**René Vennik** · 04-05-2009, 17:04

Ja moet dus van het rollover object een negatieve margin-bottom instellen. Even een tipje: online voorbeelden helpen natuurlijk veel meer.

**Jelle de Jong** · 04-05-2009, 17:06

heb 'm nog niet online, anders had ik dat zeker gedaan:D

bedankt, ik ga kijken hoe ik er zo'n negatieve margin-bottom van kan maken.
Aanvullend bericht:
Ik snap het internet niet, hoeveel negatieve marge moet ik doen, en hoe schrijf ik dat het best.

momenteel staat er voor die image:

<td colspan="2"><a href="Home.html"><img src="images/Home_03.gif" width="auto" height="auto" border="0" onmouseover="this.src='images/Home-Groot.png'" onmouseout="this.src='images/Home_03.gif'"></a></td>

**Jonathan Dequeker** · 04-05-2009, 18:37

Code:

<td colspan="2" style="background-color: #kleurvanjeknopje">
  <a href="Home.html">
    <img src="images/Home_03.gif" width="auto" height="auto" border="0" onmouseover="this.src='images/Home-Groot.png'" onmouseout="this.src='images/Home_03.gif'" />
  </a>
</td>

Misschien zoiets?

Daarnaast ook de tip om rollovers via CSS te doen, geen tables te gebruiken en voor dergelijke afbeeldingen gebruik je ook het best ".png". Ook sluit je volgens XHTML het img-element af met " />"

Code:

a.menu-item:link, a.menu-item:visited {
 background: #kleurvanjeknopje url("images/Home_03.gif") center no-repeat;
}
a.menu-item:hover {
 background: #kleurvanjeknopje url("images/Home-Groot.png") center no-repeat;
}

**Jelle de Jong** · 04-05-2009, 19:14

hey jonathan,

ik heb je eerste code geprobeerd maar dat werkt niet, dan schuift alles gelijk al naar beneden.
bekijk afbeelding 7 en 8 maar.
7 is als ik er niet op zit met mn muis, 8 als ik er wel op zit.

Ik maak deze html mbv dreamweaver dus ik zou niet weten hoe ik het in css zet....

bedankt voor je hulp, misschien kan je nog wat doen na aanleiding van het behaalde resultaat van je eerste code.

ik weet niet of het helpt maar ik zal de gehele html posten.
dit is de html met jou inbreng.

groetjes

Code:

 <html>
<head>
<title>layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/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;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('img/Home-Groot.png')">
<!-- Save for Web Slices (layout.psd) -->
<table width="500" height="701" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
		<td colspan="12" background="images/Home_01.gif" width="500" height="16" alt=""></td>
  </tr>
	<tr>
		
        <td valign="top" rowspan="2" background="images/Home_02.gif" width="38" height="200" alt=""></td>
		<td colspan="2" style="background-color: #f9ebae">
  <a href="Home.html">
    <img src="images/Home_03.gif" width="auto" height="auto" border="0" onmouseover="this.src='images/Home-Groot.png'" onmouseout="this.src='images/Home_03.gif'" />
  </a>
</td>
          
		<td valign="top" colspan="3"><a href="Service.html"><img src="images/Home_04.gif" alt="" width="106" height="56" border="0"></a></td>
		<td valign="top" colspan="2"><a href="Portfolio.html"><img src="images/Home_05.gif" alt="" width="106" height="56" border="0"></a></td>
		<td valign="top" colspan="3"><a href="Contact.html"><img src="images/Home_06.gif" alt="" width="106" height="56" border="0"></a></td>
		<td valign="top" rowspan="2" background="images/Home_07.gif" width="38" height="200" alt=""></td>
	</tr>
	<tr>
		<td valign="top" colspan="10" background="images/Home_08.gif" alt="&lt;Home&gt;" width="424" height="144" border="0"></td>
	</tr>
	<tr>
		<td valign="top" colspan="12" background="images/Home_09.gif" width="500" height="9" alt=""></td>
	</tr>
	<tr>
		<td colspan="12" background="images/Home_10.gif" width="500" height="8" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2" background="images/Home_11.gif" width="115" height="92" alt=""></td>
		<td colspan="2" background="images/Home_12.gif" width="83" height="83" alt=""></td>
		<td rowspan="2" background="images/Home_13.gif" width="48" height="92" alt=""></td>
		<td colspan="2" background="images/Home_14.gif" width="83" height="83" alt=""></td>
		<td colspan="2" rowspan="2" background="images/Home_15.gif" width="48" height="92" alt=""></td>
		<td background="images/Home_16.gif" width="83" height="83" alt=""></td>
		<td colspan="2" rowspan="2" background="images/Home_17.gif" width="40" height="92" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" background="images/Home_18.gif" width="83" height="9" alt=""></td>
		<td colspan="2" background="images/Home_19.gif" width="83" height="9" alt=""></td>
		<td background="images/Home_20.gif" width="83" height="9" alt=""></td>
	</tr>
	<tr>
		<td colspan="12" background="images/Home_21.gif" width="500" height="9" alt=""></td>
	</tr>
	<tr>
		<td width="500" height="345" colspan="12" valign="top" background="images/Home_22.gif" alt="">
			<font face="Century Gothic" color="#faeaae">
             <br> <h2>&nbsp; Welkom </h2> </font>
			
          <font face="Century Gothic" size="-1" color="#FFFFFF">
         <P Align="left">
          &nbsp; Wilt u een website en of een logo precies naar uw wenzen ontworpen, <br>
          &nbsp; dat doen wij voor u en nog wel voor een hele scherpe prijs. <br>
          &nbsp; Samen met de klant proberen we een zo perfect mogelijk resultaat te <br>
          &nbsp;  boeken.</P></font> </td>
	
    
  </tr>
	<tr>
		<td colspan="12" background="images/Home_23.gif" width="500" height="21" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="38" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="77" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="29" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="54" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="48" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="79" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="27" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="83" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="38" height="1" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

**Jelle de Jong** · 06-05-2009, 17:34

Dag,

ik heb eindelijk online beeld!
www.kingalex.nl/Index.html
( vergeet /Index.html niet anders pakt hij hem niet...)

Als je met je muis over de Home button gaat zie je een rollover verandering maar de Banner met Kingds zakt mee naar beneden. Dit is natuurlijk niet de bedoeling.
Wat moet ik doen?

Groetjes,

Jelle de Jong

**werty** · 07-05-2009, 07:43

Probeer eens de breedte normaal intestellen en de hoogte laten veranderen als die gemouse-overed wordt.
Verder z-index: 500; even bij style="" zetten.

**Jelle de Jong** · 07-05-2009, 17:29

hey Werty,

ik heb het geprobeerd maar er is geen verandering in gekomen.
Dat kan natuurlijk ook komen omdat ik met mijn kleine html kennis het verkeerd getyped heb hoor.
Dit is een voorbeeld van hoe de image van de Home knop eruit ziet met de z-index etc.

Code:

<td z-index: 500; valign="top" colspan="2"><a href="index.html"><img src="images/Home_03.gif" width="106" height="auto" border="0" onmouseover="this.src='images/Home-Groot.png'" style="margin-bottom:0" onmouseout="this.src='images/Home_03.gif'"></a></td>

de 500 staat nu wel tussen de haaksjes, "500".
nog steeds geen verschil.

www.kingalex.nl

Help, Rollover probleem