Navigatiebalk Afbeeldingen wijzigen

Vorige onderwerp Volgende onderwerp Ga naar beneden

Tutorial Navigatiebalk Afbeeldingen wijzigen

Bericht van TonnyKamper op di 3 jul 2018 - 20:14

Navigatiebalk - Gewijzigde afbeeldingen bij het passeren van de muis (cursor)

1. Het Doel


In deze tutorial zullen we leren hoe je een navigatiebalk kunt maken die reageert op het passeren van de muis. Simpel gezegd, we gaan een navigatiebalk maken waarin elke afbeelding (die elk een link vertegenwoordigt) reageert wanneer we erover zweven.
  - (we bewegen de muis over de afbeelding) ->  

Deze tutorial is geschikt voor de versies : phpBB2, phpBB3, punBB, Invision (nog niet getest op ModernBB)

2. Vereisten: HTML en CSS


Wat is HTML en CSS?


Dit zijn de twee meest voorkomende talen bij het maken van statische WEB-pagina's. HTML is in sommige opzichten het skelet van de pagina, de code die het rangschikt. En de CSS is de jurk, fondsen, kleuren, "decoratie". In deze zelfstudie gebruiken we alleen HTML en CSS, niet PHP, Flash, laat staan ​​Javascript (JS).

Waar plaats je de CSS?


Een stylesheet is beschikbaar voor ActieForum-gebruikers. Het is in deze stylesheet dat we al onze CSS plaatsen, ga naar:
Beheerderspaneel Display Plaatjes en Kleuren Kleuren CSS-stylesheet tab

CSS-attributen die we zullen gebruiken?


Width & Height
- Width : bepaalt de breedte | Waarde : nummer in px hier.
- Height : bepaalt de hoogte | Waarde : nummer in px hier.
Background-image
- Geeft een achtergrondafbeelding weer | Waarde : url('http://url_afbeelding').

Het pseudo-element : hover


Dit is het element dat bepaalt hoe het blok reageert op de passage van de muis: "Geeft het element aan waar de muis doorheen gaat."
Het is dit pseudo-element dat we zullen gebruiken.

3. Tutorial: Hoe te handelen?


STAP 1:


U moet de afbeeldingen maken die u van dienst moeten zijn. Twee voor elke link, één afbeelding voor elke link voor het passeren van de muis en één afbeelding voor de verandering die plaats vindt tijdens het passeren van de muis.

STAP 2:


Schakel de tekst uit in de navigatiebalk om " Home" te vermijden, ga naar:
Beheerderspaneel Display Headers & navigatie In navigatiebalk alleen afbeeldingen weergeven : JA

STAP 3:


Ga naar:
Beheerderspaneel Display Plaatjes beheren Uitgebreide modus

Vervang de url's van:  Index, Kalender, Portaal, FAQ, Zoeken, Gebruikerslijst, Gebruikersgroepen, Mijn profiel bewerken, Privéberichten, Nieuwe privéberichten, Registreren, Inloggen, Uitloggen door het volgende adres:
Code:
https://illiweb.com/fa/empty.gif

 STAP 4: De ID's, id = "..."


De ID's zijn gekoppeld aan de afbeeldingen voor de navigatiebalk, het is aan deze ID's dat we de CSS-code zullen toewijzen.
Identifiër (type #)BeschrijvingIdentifiër (type #)Beschrijving
#i_icon_mini_indexId. de afbeelding van de link Index#i_icon_mini_calendarId. de afbeelding van de link Kalender
#i_icon_mini_portalId. de afbeelding van de link Portaal#i_icon_mini_faqId. de afbeelding van de link FAQ
#i_icon_mini_searchId. de afbeelding van de link Zoeken#i_icon_mini_membersId. de afbeelding van de link Leden
#i_icon_mini_groupsId. de afbeelding van de link Groepen#i_icon_mini_profileId. de afbeelding van de link Profiel
#i_icon_mini_messageId. de afbeelding van de link PB#i_icon_mini_new_messageId. de afbeelding van de link Nieuwe PB
#i_icon_mini_logoutId. de afbeelding van de link Log uit#i_icon_mini_loginId. de afbeelding van de link Log in
#i_icon_mini_registerId. de afbeelding van de link Registreer

STAP 5: De CSS-code


Deze code moet worden geïntegreerd in de CSS-stylesheet van je forum, ga naar:
Beheerderspaneel Display Plaatjes en Kleuren Kleuren CSS-stylesheet tab

Volg gewoon de aanwijzingen tussen / * * /
Code:
/*AFBEELING INDEX*/
#i_icon_mini_index{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_index:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING PORTAAL*/
#i_icon_mini_portal{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_portal:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING KALENDER*/
#i_icon_mini_calendar{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_calendar:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING FAQ*/
#i_icon_mini_faq{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_faq:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING ZOEKEN*/
#i_icon_mini_search{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_search:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING GEBRUIKERSLIJST*/
#i_icon_mini_members{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_members:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING GEBRUIKERSGROEPEN*/
#i_icon_mini_groups{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_groups:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING PROFIEL*/
#i_icon_mini_profile{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_profile:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING PB (geen nieuwe berichten)*/
#i_icon_mini_message{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_message:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING PB (nieuwe berichten)*/
#i_icon_mini_new_message{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_new_message:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING LOG UIT*/
#i_icon_mini_logout{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_logout:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING REGISTREER*/
#i_icon_mini_register{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_register:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
/*AFBEELDING LOG IN*/
#i_icon_mini_login{
   background-image:url('URL'); /*afbeelding als de muis niet overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
#i_icon_mini_login:hover{
   background-image:url('URL'); /*afbeelding als de muis overvliegt*/
   width:??px; /*Breedte v.d. afbeelding*/
   height:??px; /*Hoogte v.d. afbeelding*/
}
In deze code moet je de volgende informatie aanpassen:

  • URL: wijzigen in het juiste URL adres van de gehoste afbeelding.
  • "width: ?? px": ?? moet worden gewijzigd in de breedte van de afbeelding in pixels, bijv: 30px .
  • "height: ?? px": ?? moet worden gewijzigd in de hoogte van de afbeelding in pixels, bijv: 30px .

4. Enkele tips



  • In het geval dat de knoppen aan elkaar zijn vastgelijmd, wordt sterk aangeraden ervoor te zorgen dat die afbeelding en de afbeelding die verschijnt bij het overvliegen (door de cursor) dezelfde afmetingen hebben.
  • Om een ​​zoomeffect te maken, is het voldoende dat de grootte van het overvliegend beeld evenredig wordt vergroot ten opzichte van het basisbeeld.
  • Voor een onmiddellijke vervanging zonder laadtijd (de eerste keer), zou u de afbeelding en de vervanging ervan op dezelfde "afbeelding" kunnen hebben en de eigenschap background-position in de CSS gebruiken om de ene of de andere te tonen.

Veel succes  Smile
avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 221
Geboortedatum : 23-10-54
Leeftijd : 63
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum