Mouse over button plaatsen photoshop website

Status
Niet open voor verdere reacties.
C

calvinsnl

Gebruiker
Lid geworden
11 apr 2012
Berichten
57
beste,

Ik ben bezig met een photoshop website
en er staat al een button met facebook, youtube en twitter.
nu heb ik ergens gelezen dat ik er een ander plaatje overheen moet zetten en die dan linken naar de gewenste pagina, en dan op een of andere manier dat als de muis erop komt het vervangen door een ander plaatje.
kan iemand mij uitleggen hoe ik dat plaatje in kan voegen en op die plek krijg?

MvG calvin15
 
Laatst bewerkt door een moderator:
Gebruik een Css "a:hover" Tag of Het moet d.m.v een javascript'je

HTML: 
<head>
<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 onload="MM_preloadImages('afbeelding.extensie')">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','afbeelding_1.extensie',1)"><img src="afbeelding_2.extensie" name="Image1" width="16" height="16" border="0" id="Image1" /></a>
</body>

Ik zou dan toch voor CSS gaan... :p
 
Laatst bewerkt:
bedankt, het is mij gelukt.
nu stuit ik op het volgende probleem.
ik heb voor mezelf de knop op de goede plek zitten, maar als ik een ander laat kijken staat de knop niet op de goede plek.
dit komt omdat ik de knop heb vastgezet op XX aantal pixels vanaf links.
ik wil dat die XX aantal pixels gelden binnen die DIV tag, hoe kan ik hiervoor zorgen.
ik heb dus een background die aanpast aan je scherm en een "middle" deel waarop de site is met een standaard breedte.
weet iemand hoe ik kan zorgen dat die knop vast gepind word aan die DIV tag voor "middle"

MvG calvin15
 
Hoi Calvin,
Als je de absolute posities van de links er uit haalt, zal het een stuk beter gaan. :)
 
Beste,

Naar wat zou ik dit moeten veranderen om die knop op de juiste plek te krijgen?

Mvg calvin
 
Hoi Calvin,
Ah, nu zie ik dat de background van de middenkolom één grote afbeelding is. Dat maakt het rangschikken van je elementen lastiger, want dit is een star gegeven en dan kan niets erbinnen flexibel zijn.
  • Als je later bv. besluit dat het logo toch kleiner moet om meer van de pagina te zien, moeten de afstanden van alle elementen veranderd worden. Als het gat tussen logo en eronder kleiner moet worden: hetzelfde. Enz.
  • Als er bv. meer content op de pagina komt te staan of als je later kiest voor een ander letterformaat, loopt de inhoud uit de achtergrond en/of kloppen de posities van de vakken niet meer.
  • Het is beter om het background-image op te splitsen in onderdelen die apart als background-image in de <div>'s komen.

Maar goed.
Om in de huidige situatie de knoppen op hun juiste plek te houden, kan je ze het makkelijkste toch een absolute positie laten houden. Maar die absolute positie moet samenhangen met de linkerbovenhoek van de <div id="middle">:
  • Dan moet deze #middle een relatieve positie krijgen.
  • De afstanden left en top van de menu-links moeten opnieuw bepaald worden.
  • En het background-image van de normale toestand facebook2.png is overbodig: dat zit al in de grote background. *)

De css wordt dan iets als:
Code: 
#middle {
    width: 997px;
    height: 959px;
    margin: 0 auto;
    background: url(images/middle.png);
    position: relative;
}
ul#menu li a.facebook {
    width: 101px;
    height: 29px;
    position: absolute;
    left: 487px;
    top: 623px;
}
Met vriendelijke groet,
CSShunter
__________
*) Bij een javascript-hover is het een image op de voorgrond (in de html opgegeven). Dan is het nodig om met een onmouseout(..) het hover-image weer terug te veranderen in het normale image.
Bij een css-hover hoeft dat niet: dan is het een image in de background en gebeurt het automatisch als je de hover verlaat. Omdat in het normale geval het image al als background-image in de grote afbeelding zit, hoeft er in de normale toestand van de link dus geen background-image te komen. Daar is het alleen een transparant oppervlakje van 101*29px, dat bij een hover z'n background-img krijgt.
 
Laatst bewerkt:
Oke, maar zorgt dat dan dat de buttons er overal(verschillende resoluties) op de goede plek staat?
En ik moet dus alleen een hover scriptje neerzetten en dat is genoeg?
En kunt u me mischien ook een beetje zit met de position:relative ik zou er graag een beetje meer info over willen aangezien ik het op w3 niet goed uitgelegd vind.(zal wel aan mij liggen)

Mvg calvin
 
Hoi Calvin,

Oke, maar zorgt dat dan dat de buttons er overal(verschillende resoluties) op de goede plek staat?
En ik moet dus alleen een hover scriptje neerzetten en dat is genoeg?
Klik om te vergroten...

  • Ik zeg altijd maar: proberen is weten! ;)

=======
En kunt u me misschien ook een beetje zit met de position:relative ik zou er graag een beetje meer info over willen aangezien ik het op w3 niet goed uitgelegd vind.(zal wel aan mij liggen)
Klik om te vergroten...


Met vriendelijke groet,
CSShunter
 
Beste csshunter,

bedankt voor je hulp het is me gelukt. ik had eers zelf nog met margin gezeten, maar wist niet of dit wel goed kon.
ik heb het nu werkend alleen weet u ook toevallig hoe ik het kan oplossen met zoomen, dan het achtergrond gewoon groot blijft op het scherm(uitzoomen).

MvG calvin
 
... oplossen met zoomen, dan het achtergrond gewoon groot blijft op het scherm (uitzoomen)?
Klik om te vergroten...
Voor deze vraag een paar tegenvragen:
  • Alweer: proberen is weten. Heb je 't al geprobeerd?
  • En heb je dan een probleem als je gaat inzoomen/uitzoomen? Zo ja, welk probleem, in welke browser(versie) ?
:)

En je mag "jij" zeggen, dat doe ik ook. ;)

Met vriendelijke groet,
CSShunter
 
ja, ik heb het zelf geprobeerd, maar het deed niet zoals ik het wou.
het gaat om het uitzoomen van de site, het achtergrond gaat zich dan herhalen en blijft niet gevuld.
ik heb dit in google chrome en in internet explorer bekeken en deden allebij hetzelfde.

MvG calvin
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan