Mouseover in Kompozer via CSS/HTML

[Wesso]

Hallo,

Ik ben een complete onbekende met HTML en websites bouwen, maar ik probeer wel het een en ander uit. Ik heb even gesnuffeld aan NVU en las dat Kompozer een beter, bijgewerkt programma is en ben dus daarop overgestapt. Mijn plan is om een redelijk professioneel tonende website te maken zonder al te veel moeite

Het gaat om Kompozer 0.8b3. Ik wil plaatjes in de map "Images" gebruiken als knoppen in de linkerkolom en dan mouseover met een link en "alt". Het gaat om twee plaatjes: één met een grijze pijl en de ander met een groene pijl (JPG). Hoe werkt dat in CSS of HTML? Het liefst gebruik ik CSS, want ik heb gezien dat daar een aparte wizard voor is. Kan iemand mij dat uitleggen?
- Moet ik een nieuwe stijlregel aanmaken en onder welke naam?
- Is er een standaardcode voor mouseover / hover voor CSS of HTML?
- Kan ik de mouseover-on ook laten aanstaan als bv. de webpagina "Contact" is geopend?

Misschien is hier al een topic voor maar ik ben nog niets bruikbaars tegengekomen.
Alvast bedankt!

[nirwana]

Wesso,

Allereerst welkom hier op het forum.

Ik denk dat dit script wel aardig in de buurt komt van wat je wilt: www.dynamicdrive.com/dynamicindex15/domroll.htm

Hiervoor heb ik alvast een voorbeeld online geplaatst: www.mozbrowser.nl/web/wesso/rollover.html
Dit voorbeeld gebruikt nu 2 knoppen vanuit een Images-map, maar uiteraard kun je er zoveel opnemen als je wilt. Bij elke knop geef je in de class-informatie aan welke afbeelding gebruikt moet worden als je er met de muis overheen beweegt.

Ook heb ik er een link aan toegevoegd, zodat je een pagina kunt toevoegen als men op de knop klikt:

Code: Selecteer alles

<a href="index.html"><img src="Images/offgreen.gif" class="domroll Images/ongreen.gif" alt="Home" title="Home" /></a>

Verder is er nog een alt en een title aan toegevoegd. Alt wordt gebruikt voor alternatieve tekst, maar dat wist je waarschijnlijk al. Deze tekst wordt getoond zolang de afbeelding nog niet is gedownload.

De title wordt gebruikt als je je muis boven de afbeelding houdt, dus als een tooltip. In Internet Explorer wordt de alt-attribuut ook als tooltip gebruikt als er geen title-attribuut is opgegeven, dus daardoor kan er wat verwarring ontstaan. Maar het is een goed gebruik om zowel alt als ook title op te geven als je in alle browsers een tooltip wilt tonen.

[Wesso]

Bedankt voor je reactie.
Het probleem is dat ik nog geen hosting heb, dus kan ik de code van domroll niet uploaden naar een webserver. Is domroll trouwens een Javascript-code?
Javascript kan ik ook van allerlei sites krijgen kant-en-klaar. Ik vraag me af of het een probleem is als je dan mijn website opent. Krijg je dan standaard een waarschuwing van de browser?
Als dat geen probleem is wil ik met Javascript wel een paar mouseovers maken. En een banner waar panoramafoto's in voorbijkomen.

Werkt Javascript ook als ik de website offline in een browser (IE) wil bekijken (knop Bekijken in Kompozer)? Want daar komt dan een gele balk in te staan.

[knorretje]

De code van domroll is inderdaad javascript.
Javascript is van zichzelf veilig, het heeft geen toegang tot de computer.
Je kunt via javascript geen bestanden verwijderen bijvoorbeeld.
Als je iets verkeerd programmeert, dan kun je niks stukmaken of zo. Dus je kunt het rustig proberen.
Er is echter 1 uitzondering, en dat is ook de reden dat je in sommige browsers een waarschuwing krijgt, namelijk dat kwaadaardige websites vaak javascript nodig hebben om een virus op jouw computer te zetten, het zogenaamde "heap spraying". Dan worden er via javascript grote blokken geheugen met een bepaalde code gevuld. Dus als je een vage site wilt bezoeken, dan kun je het beter uitzetten. Nog beter is het dan natuurlijk om er helemaal niet heen te gaan.
In IE8 krijg ik trouwens ook een gele waarschuwingsbalk. Je kunt dan op de balk klikken, dan verschijnt er een menu. In het menu kun je dan klikken op "Geblokkeerde inhoud uitvoeren".
De instellingen van IE zijn wat mij betreft onbegrijpelijk, dus ik heb voor de rest geen idee hoe je dit verandert. Daarom gebruik ik ook liever Firefox.

[Wesso]

Ik ben een stuk verder gekomen via een paar codes op internet voor CSS.
Nu heb ik twee knoppen onder elkaar staan, maar als ik er overheen muis, verspringen ze naar de kantlijn. Hoe kan ik ervoor zorgen dat ze op hun plaats blijven?
HTML code in HEAD:

Code: Selecteer alles

<meta http-equiv="content-type"
content="application/xhtml+xml; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<style type="text/css">
div.hvimg img.hvimgr {
display: none;
}
div.hvimg:hover img.hvimgo {
display: none;
}
div.hvimg:hover img.hvimgr {
display: block;
}
<title>home</title>

</style>

Bij de tabel in de linkerhelft:

Code: Selecteer alles

<table style="text-align: center; width: 222px; height: 269px;"
border="0" cellpadding="0" cellspacing="2">
<tbody>
<tr>
<td
style="height: 43px; width: 210px; text-align: center; vertical-align: middle;">
<div class="hvimg"> <a href="Verkeersvisie_Home_2.html"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 1: Home" class="hvimgo"
src="Images/Knoppen/Fotograafuit.jpg"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 1: Home" class="hvimgr"
src="Images/Knoppen/Fotograafaan.jpg"> </a></div>
<a href="home.html"> </a></td>
</tr>
<tr>
<td
style="height: 43px; width: 210px; text-align: center; vertical-align: middle;">
<div class="hvimg"> <a href="Verkeersvisie_Home_2.html"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 2: Home" class="hvimgo"
src="Images/Knoppen/Collectieuit.jpg"> <img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 2: Home" class="hvimgr"
src="Images/Knoppen/Collectieaan.jpg"></a></div>
<a href="home.html"> </a> </td>
</tr>

[knorretje]

Ik zou in jouw css eerst de display:block veranderen in display:inline.
Een <img> is tegenwoordig een inline-element.
Zie https://developer.mozilla.org/en/HTML/Inline_elements
Een ander mogelijk probleem is dat er een spatie staat tussen de beide <img> elementen in de code die je hebt gepost. Die zou ik voor de zekerheid eventjes weghalen.

[nirwana]

Zonder Javascript zou het Internet tegenwoordig nauwelijks nog denkbaar zijn. Inmiddels heb je geavanceerde internet-toepassingen (bijvoorbeeld Gmail om mail te lezen of Facebook / Hyves om met je vrienden te communiceren) die zwaar op Javascript leunen. Uiteraard moet je uitkijken dat je website hiervan afhankelijk wordt. Maar voor dit soort zaken (zoals een mouseover) kun je het prima gebruiken.

Overigens vind ik de code met gebruik van Javascript een stuk eenvoudiger dan de code die jij nu hier hebt geplaatst. Daarin wordt ook een tabel gebruikt waarvan ik me afvraag of je die wel nodig hebt, maar dat terzijde. In feite doet de CSS-code hetzelfde als de Javascript-code, maar dan zonder gebruik van script. Echter betwijfel ik of het daar eenvoudiger door wordt. Maar dat laat ik verder aan jou over, want het is jouw website en je moet datgene gebruiken waar je je zelf goed bij voelt.

[Wesso]

Ik zou in jouw css eerst de display:block veranderen in display:inline.

Thanks, probleem in een keer opgelost!

Een ander mogelijk probleem is dat er een spatie staat tussen de beide <img> elementen in de code die je hebt gepost. Die zou ik voor de zekerheid eventjes weghalen.

Bedoel je de hvimg -codes in de HEAD? Die heb ik zo overgenomen van deze site.
Nu is het alleen nog effe knutselen met de andere knoppen in Paint en dan copy-paste voor de code.
Ik denk dat ik javascript nog kan gebruiken voor een fotobanner, maar dat komt later wel.

[knorretje]

Ik bedoelde deze regel:

Code: Selecteer alles

src="Images/Knoppen/Collectieuit.jpg"> <img

en dan veranderen in:

Code: Selecteer alles

src="Images/Knoppen/Collectieuit.jpg"><img

Om de een of andere reden gaf deze spatie bij mij een kleine afwijking (paar pixels verschuiving) in de rendering van mijn testpagina.
Waarom precies heb ik nog niet gecontroleerd.

[Wesso]

^^ Aangepast.
Als ik de website bekijk in Firefox is het precies als het hoort. Mouseovers werken allemaal en staan op de goede plek.
Maar in IE 8 doen de mouseovers het niet en staat de bovenste 1 of 2 pixels te ver naar links. Wat nu?

Code:

Code: Selecteer alles

<tbody>
<tr>
<td
style="text-align: center; vertical-align: middle; height: 43px; width: 210px;">
<div class="hvimg"> <a href="Verkeersvisie_Home_2.html"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 1: Home" class="hvimgo"
src="Images/Knoppen/Fotograafuit.jpg"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 1: Home" class="hvimgr"
src="Images/Knoppen/Fotograafaan.jpg"> </a></div>
<a href="Verkeersvisie_Home_2.html"> </a></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<div class="hvimg"> <a href="Verkeersvisie_Home_2.html"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 2: Home" class="hvimgo"
src="Images/Knoppen/Collectieuit.jpg"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 2: Home" class="hvimgr"
src="Images/Knoppen/Collectieaan.jpg"></a></div>
<a href="Verkeersvisie_Home_2.html"> </a> </td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<div class="hvimg"> <a href="Verkeersvisie_Home_2.html"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 3: Home" class="hvimgo"
src="Images/Knoppen/Bestellenuit.jpg"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 2: Home" class="hvimgr"
src="Images/Knoppen/Bestellenaan.jpg"></a></div>
<a href="Verkeersvisie_Home_2.html"> </a> </td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<div class="hvimg"> <a href="Verkeersvisie_Home_2.html"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 4: Home" class="hvimgo"
src="Images/Knoppen/Opdrachtenuit.jpg"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 2: Home" class="hvimgr"
src="Images/Knoppen/Opdrachtenaan.jpg"></a></div>
<a href="Verkeersvisie_Home_2.html"> </a> </td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<div class="hvimg"> <a href="Verkeersvisie_Home_2.html"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 5: Home" class="hvimgo" src="Images/Knoppen/FAQuit.jpg"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 2: Home" class="hvimgr" src="Images/Knoppen/FAQaan.jpg"></a></div>
<a href="Verkeersvisie_Home_2.html"> </a> </td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<div class="hvimg"> <a href="Verkeersvisie_Home_2.html"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 6: Home" class="hvimgo"
src="Images/Knoppen/Contactuit.jpg"><img
style="border: 0px solid ; width: 204px; height: 42px;"
alt="Testknop 2: Home" class="hvimgr"
src="Images/Knoppen/Contactaan.jpg"></a></div>
<a href="Verkeersvisie_Home_2.html"> </a> </td>
</tr>
<tr>
</tr>
</tbody>

[nirwana]

Voor zover ik weet werkt IE8 niet op dezelfde manier met hover in CSS. Volgens mij ondersteunt Internet Explorer dat alleen maar voor linkjes.

[knorretje]

De css pseudoklasse :hover werkt in IE8 alleen voor linkjes als je geen strict doctype gebruikt.
Als de :hover op andere elementen moet werken, dan is in IE8 een strict doctype verplicht.
Zie http://msdn.microsoft.com/nl-nl/library ... 85%29.aspx

[Wesso]

^^ Ja dat maakt het alweer iets lastiger. Ik heb in Kompozer het volgende HTML-script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

terwijl het tweede voorbeeld van IE het heeft over <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
Die code lijkt me ook niet zo handig, want er staat geen plaatje met een link in dat verandert d.m.v. hover.

Moet ik het HTML-script ergens veranderen in Kompozer, of kan ik beter een andere :hover-code gebruiken?

[knorretje]

Je zult toch echt het doctype moeten veranderen.

Jouw css-code werkt niet in IE8 met:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Wat werkt er wel volgens microsoft:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

Zojuist geprobeerd, wat ook lijkt te werken:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Voorbeeldje:

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>test</title>
  <style type="text/css">
    div.hvimg:hover { background: yellow; }
    div.hvimg img.hvimgr { display: none; }
    div.hvimg:hover img.hvimgo { display: none; }
    div.hvimg:hover img.hvimgr { display: inline; }
  </style>
</head>
<body>
  <div class="hvimg"><p>TEST</p>
    <img style="border: 1px solid red; width: 204px; height: 42px;" alt="Testknop 1: Home" class="hvimgo" src="grijs.jpg">
    <img style="border: 1px solid red; width: 204px; height: 42px;" alt="Testknop 1: Home" class="hvimgr" src="groen.jpg">
  </div>
</body>
</html>

[Wesso]

Okee, nu nog het doctype veranderen.
Is nu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
De <!DOCTYPE...> regel kan ik niet veranderen. In de voorkeuren staat bij structuur als taal: HTML 4 en als DTD: Strict aangevinkt. Hoe kan het dat dat niet overeenkomt met het doctype van mijn website?

Heb ik misschien een foute versie van Kompozer? Als ik op externe tekstverwerker klik, opent de website in IE...
versie 0.8b3 (20100301)