Een Link In Een Banner Invoegen

Inhoudsopgave:

Een Link In Een Banner Invoegen
Een Link In Een Banner Invoegen

Video: Een Link In Een Banner Invoegen

Video: Een Link In Een Banner Invoegen
Video: HOW TO: KLIKBARE LINK IN JE BANNER TOEVOEGEN 2024, April
Anonim

Als u een banner heeft, maar er is geen kant-en-klare html-code om deze in de pagina in te voegen, dan is het toevoegen van de gewenste link niet zo moeilijk. Ook als de banner is gemaakt met behulp van flash-technologie. Mogelijke opties voor het organiseren van links naar banners in grafische en flash-formaten in de broncode worden hieronder beschreven.

Een link in een banner invoegen
Een link in een banner invoegen

instructies:

Stap 1

Als de banner een van de grafische formaten heeft (gif, jpg, png, bmp), dan is het voldoende om de afbeeldingstag in de linktag te plaatsen. Maak eerst de afbeeldingstag. In de opmaaktaal van webpagina's (HTML - HyperText Markup Language - "hypertext opmaaktaal") ziet de eenvoudigste versie er als volgt uit: Hier wordt het "relatieve adres" van de afbeelding gespecificeerd in het src-attribuut. In deze versie gaat de browser ervan uit dat de afbeelding zich in dezelfde map op uw server bevindt als waar de pagina zelf is waar de banner wordt ingevoegd. Maar het is beter om een "absoluut adres" op te geven:

Stap 2

Er zijn nog een paar attributen om aan deze tag toe te voegen. Twee attributen geven de afmetingen van de banner aan (hoogte en breedte). Dit zijn optionele attributen - de afbeelding wordt zonder deze weergegeven als alles goed gaat wanneer de pagina van de server naar de browser wordt geladen. Maar als de afbeelding om de een of andere reden niet wordt geladen, kan het ontbreken van afmetingen ertoe leiden dat alle andere ontwerpelementen niet op hun plaats zijn. Het maatlabel ziet er als volgt uit:

Stap 3

Standaard tekent de browser een blauwe rand rond linkafbeeldingen. Om dit te voorkomen, voegt u een randkenmerk met een null-waarde toe aan de bannertag:

Stap 4

Voeg nog een attribuut (titel) toe, dat de tekst voor de knopinfo zal bevatten wanneer u de muisaanwijzer over de banner beweegt:

Stap 5

U hebt de afbeeldingstag met de belangrijkste attributen voorbereid, nu moet u deze in de linktag plaatsen. Elke hyperlink wordt gevormd door twee tags - openen en sluiten: De openingstag bevat het href-attribuut, dat het adres bevat voor het verzenden van het verzoek. Tussen deze twee link-tags en plaats de banner-tag: De HTML-code van de banner met de link is klaar, vergeet niet te vervangen: - in het href-attribuut: "https://kakprosto.ru" door het adres van uw link voor de banner; - in het src-attribuut: " https://kakprosto.ru/banner

Stap 6

Al het bovenstaande heeft betrekking op beeldbanners, maar er zijn ook banners gemaakt met behulp van flash-technologie. Om op een standaard manier een link in een flashfilmpje in te voegen, heb je niet alleen de banner zelf nodig, maar ook de broncode. Bovendien kunt u de broncode bewerken en vervolgens de Flash-film compileren alleen in een gespecialiseerde editor - een gewone teksteditor is hiervoor niet geschikt. Er is echter een manier om al deze problemen te omzeilen, door jezelf te beperken tot het bewerken van alleen HTML en CSS (Cascading Style Sheets - "cascading style sheets"). De CSS-taal wordt gebruikt voor een meer gedetailleerde (vergeleken met HTML) beschrijving van het uiterlijk van pagina-elementen. Met zijn hulp kunnen vrij complexe meerlaagse structuren op de pagina's worden gebouwd. Dit gaan we gebruiken door de Flash-banner in de onderste laag te plaatsen en de laag met de link erboven. De HTML-code van de banner ziet er als volgt uit:

Vergeet niet de attributen width en height erin te vervangen (op twee plaatsen), de bannernaam banner.swf (op twee plaatsen) en het linkadres https://kakprosto.ru (op één plaats) en de SCC-code corresponderend met deze HTML-code zou als volgt moeten zijn:

div.linkedFlashContainer {positie: relatief; z-index: 1; rand: 0px; breedte: 468px; hoogte: 60px}

a.flashLink {positie: absoluut; z-index: 2; breedte: 468px; hoogte: 60px; achtergrond: url (spacer.gif) niet herhalen;}

Een transparante afbeelding (van elke grootte) genaamd spacer

Aanbevolen: