Hoe om 'n Rollover-prent in Dreamweaver te skep

'N Oorsigbeeld is 'n prent wat na 'n ander prent verander wanneer jy of jou kliënt die muis daaroor rol. Dit word algemeen gebruik om 'n interaktiewe gevoel soos knoppies of oortjies te skep. Maar jy kan net 'n rolprent maak uit omtrent enigiets.

Hierdie handleiding is ontwerp om u te help om 'n rolloverbeeld in Dreamweaver te skep . Dit is bedoel vir gebruik deur mense wat die volgende weergawes van Dreamweaver gebruik:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Vereistes vir hierdie handleiding

• Dreamweaver
  Een van die weergawes hierbo gelys.
• 'N Oorspronklike beeld
  Maak seker om hierdie prent te optimaliseer. Dit sal jou blaaie vinniger laai.
• Die rolprent
  Hierdie beeld moet dieselfde dimensies as die oorspronklike beeld wees. En, soos die oorspronklike beeld, moet geoptimaliseer word om bladsye te laai.
• 'N webblad
  Dit is die HTML-bladsy waar jy jou rolprent sal plaas.

01 van 06

Begin

1. Begin Dreamweaver
2. Open die webblad waar jy jou oorrol wil hê

02 van 06

Voeg 'n Rollover Image Image Object in

Dreamweaver maak dit maklik om 'n rolprent te skep.

1. Gaan na die Invoegen menu en na die submenu 'Beeld Objecten'.
2. Kies 'Image rollover' of 'Rollover image'

Sommige ouer weergawes van Dreamweaver noem eerder die "Interaktiewe prente" van die prentobjekte.

03 van 06

Vertel Dreamweaver watter prente te gebruik

Dreamweaver verskyn in die dialoogkassie met die velde wat u moet invul om u oorrolprent te skep.

Prent naam

Kies 'n prent naam wat uniek is vir die bladsy. Dit moet al een woord wees, maar jy kan getalle, onderstrepe (_) en koppeltekens (-) gebruik. Dit sal gebruik word om die prent te identifiseer wat verander moet word.

Oorspronklike beeld

Dit is die URL of ligging van die prent wat op die bladsy sal begin. U kan relatiewe of absolute pad-URL's in hierdie veld gebruik. Dit moet 'n prent wees wat op u webbediener bestaan ​​of wat u oplaai met die bladsy.

Rollover Image

Dit is die prentjie wat sal verskyn wanneer jy die muis oor die prentjie beweeg. Net soos die oorspronklike beeld, kan dit 'n absolute of relatiewe pad na die prent wees, en dit moet bestaan ​​of opgelaai word wanneer jy die bladsy oplaai.

Preload Rollover Image

Hierdie opsie is standaard gekies omdat dit help om die oorskakeling vinniger te vertoon. Deur te kies om die oprolprent te laai, sal die webblaaier dit in 'n kas stoor totdat die muis daaroor rol.

Alternatiewe teks

Goeie alternatiewe teks maak jou prente meer toeganklik. Jy moet altyd 'n soort alternatiewe teks gebruik wanneer jy enige beelde byvoeg.

Wanneer geklik, gaan na URL

Die meeste mense sal op 'n prentjie klik as hulle een op 'n bladsy sien. So moet jy in die gewoonte wees om hulle kliekbaar te maak. Met hierdie opsie kan u die bladsy of URL spesifiseer om die kyker te gebruik wanneer hulle op die prentjie klik. Maar hierdie opsie is nie nodig om 'n oorskakeling te skep nie.

As jy al die velde voltooi het, klik OK om Dreamweaver te skep.

Op die volgende bladsy word die script vertoon wat Dreamweaver skryf.

04 van 06

Dreamweaver skryf die JavaScript vir jou

As jy die bladsy oopmaak in kode-aansig, sal jy sien dat Dreamweaver 'n blok JavaScript in die van jou HTML-dokument installeer. Hierdie blok bevat die 3 funksies wat u nodig het om die beelde te ruil wanneer die muis oor hulle en die voorbelading funksioneer as u daarvoor gekies het.

funksie MM_swapImgRestore ()
funksie MM_findObj (n, d)
funksie MM_swapImage ()
funksie MM_preloadImages ()

05 van 06

Dreamweaver Voeg die HTML vir die Rollover by

As jy gekies het dat Dreamweaver die oprolprente laai, dan sal jy die HTML-kode in die liggaam van jou dokument sien om die preload-skrip te bel sodat jou prente vinniger laai.

onload = "MM_preloadImages ( 'shasta2.jpg')"

Dreamweaver voeg ook al die kode vir jou prent by en verbind dit (as jy 'n URL ingesluit het). Die oordraggedeelte word bygevoeg aan die ankermerk as onmouseover en onmouseout eienskappe.

onMouseOut = "MM_swapImgRestore ()"
onMouseOver = "MM_swapImage ( 'afbeelding1', '', 'shasta1.jpg', 1)"

06 van 06

Toets die Rollover uit

Sien die ten volle funksionele rolloverbeeld en leer wat Shasta se gedagtes is.