Iedereen bezoeken van uw website zullen verwachten te zien van je rode knoppen wijzigen wanneer de muis over hen rolt. Rollovers blijkt dat een knop actief is, en door te klikken bezoekers ergens anders brengt. Wanneer u uw HTML reference controleert, ontdekken u dat kunt u niet toevoegen rollovers; u moet gebruiken JavaScript- of CSS. Of u kunt Dreamweaver gebruiken om het schrijven van de code voor je.
Wat die u nodig hebt
- Image editing software die web image slicing ondersteunt
Ontwerp uw navigatiebalk of webpagina interface in uw favoriete foto-editor. De elementen die nooit op een laag veranderen te houden. Verplaatsen van de lagen met elementen die nooit veranderen aan een laag met de naam "Vaste" en de elementen die zal veranderen met de rollover in een tweede laag met de naam "Normal State." De elementen van de gebruikersinterface van de rollover eventueel op de achtergrond, tekst, knoppenbalken of speciale effecten toegepast op de laag.
Dupliceer de "Vaste" laag en noem deze "Rollover". Wijzigingen die u aanbrengen wilt aan de nieuwe status Rollover. Verberg de laag "Rollover".
Selecteer de afbeeldingseditor's web slice gereedschap. Snijd elke knop en noem deze met de software van segment opties palet (of instrument). U moet ook kunnen zijn om toe te voegen de URL-koppeling in de software voor beeldbewerking. Als dat niet het geval is, kunt u het in Dreamweaver.
De afbeelding exporteren als een HTML-document met plakjes (het is belangrijk dat de "Rollover"-laag niet zichtbaar in dit stadium zijn). Controleer het nieuwe HTML-bestand in een browser om ervoor te zorgen dat alle segmenten zichtbaar zijn. Als je weet dat de oorspronkelijke HTML bestand van werken, de "Rollover" laag tonen en verbergen van de laag "Normal State". Selecteer de knop segmenten alleen en als 'Alleen segmenten geselecteerd' exporteren naar een submap in de map images.
Open het HTML-bestand in Dreamweaver. U ziet uw hele afbeelding samengevoegd in het documentvenster. Selecteer het segment van de knop te onthullen de tabel celrand.
Open het serverfunctie-palet. Klik op het pictogram "+" en kies "Afbeelding verwisselen" in het pull-downmenu de afbeelding verwisselen dialoog te openen. Controleer om ervoor te zorgen dat de juiste knop is geselecteerd en controleer de "Preload Afbeeldingen" en "Restore beelden op muis uit" opties. Klik op de knop "Bladeren" om te zoeken naar het segment van de afbeelding dat u hebt opgeslagen voor de status Rollover.
Voorbeeld van de webpagina in uw browser bekijken. Als alles naar behoren werkt, kunt u de webpagina opslaat en uploaden naar uw server.
- Als uw foto-editor geen snijden ondersteunt, zul je de te snijden van de afzonderlijke elementen van uw document en deze opslaan als aparte bestanden, die een pijn worden zal.
- Zorg ervoor dat uw rollover-afbeeldingen opslaan in een submap in de map images. Anders overschrijft u de normale knopafbeeldingen staat.
