Het is nu do 18 apr 2019 - 19:01

1 resultaat gevonden

Navigatiebalk Afbeeldingen wijzigen

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.
Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Avant110   - (we bewegen de muis over de afbeelding) ->   Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Apras110

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
Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Wh10
- 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 "Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_home 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
Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_home#i_icon_mini_indexId. de afbeelding van de link IndexTopics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_c10#i_icon_mini_calendarId. de afbeelding van de link Kalender
Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_portal#i_icon_mini_portalId. de afbeelding van de link PortaalTopics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_faq#i_icon_mini_faqId. de afbeelding van de link FAQ
Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_search#i_icon_mini_searchId. de afbeelding van de link ZoekenTopics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_members#i_icon_mini_membersId. de afbeelding van de link Leden
Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_groups#i_icon_mini_groupsId. de afbeelding van de link GroepenTopics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_ucp#i_icon_mini_profileId. de afbeelding van de link Profiel
Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_message#i_icon_mini_messageId. de afbeelding van de link PBTopics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_message#i_icon_mini_new_messageId. de afbeelding van de link Nieuwe PB
Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_logout#i_icon_mini_logoutId. de afbeelding van de link Log uitTopics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_logout#i_icon_mini_loginId. de afbeelding van de link Log in
Topics getagged onder i_icon_mini_groups op Nederlands Ondersteuningsforum : Icon_register#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

van TonnyKamper
op di 3 jul 2018 - 20:14
 
Zoek in: Tips & Trucs
Onderwerp: Navigatiebalk Afbeeldingen wijzigen
Antwoorden: 0
Bekeken: 249

Terug naar boven

Ga naar: