Rollover image: active-x / handje probleem

[Tommy The Cat]

In dreamweaver CS3 kun je heel simpel een rollover image maken door gebruik te maken van de rollover-image button in je insert bar.

Aldus heb ik twee images van gelijke grootte (maar dus net iets anders om de rollover visueel duidelijk te maken) in de ''original image'' en ''rollover image'' knoppen ingebracht. Vervolgens wil ik de rollover image linken naar een andere html page, dus: ik ga op het original/rollover imagefield staan en sleep dan dat handige ''pijltje'' naar een html file in m'n file-panel en klaar.

Opslaan, preview in IE en Opera.

1. In IE verschijnt een Active-x pop-up. Die moet je dus eerst toestaan voordat je rollover-image werkt. Superirritant. Kan ik dit omzeilen?

2. Zowel in IE als in Opera: de roll-over werkt, maar mijn muis wordt geen handje (het geeft dus niet duidelijk aan dat het een link is). De linkt werkt wel, dus ook de rolloverimage is gelinkt.

[ Voor 10% gewijzigd door Tommy The Cat op 14-03-2008 08:08 ]

[TERW_DAN]

Post de code eens die je gebruikt, dan is het makkelijker te zeggen wat er fout gaat. Verder, waarom zou je hier een activeX component voor gebruiken? Een simpel javascriptje is hier goed genoeg voor.

[Tommy The Cat]

Is dit genoeg?

code:

<tr>
        <td><h3><a href="Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Intro','','Default image/Intro_on.jpg',1)"><img src="Default image/Intro_out.jpg" alt="Intro" name="Intro" width="110" height="50" border="0" id="Intro" /></a></h3></td>
      </tr>

Tja. Ik weet te weinig van codes af, ik maak meerendeels gebruik van de design-modus en bij de insert bar staat een roll-over insert optie. Het lijkt me dat dreamweaver dit zo licht en toegankelijk mogelijk schrijft...

IE spreekt overigens over: actieve inhoud zoals scripts en active-x's.

[ Voor 6% gewijzigd door Tommy The Cat op 14-03-2008 08:22 ]

[MrDummy]

Weet je zeker dat je geen rollover wil maken met behulp van CSS code? Dat zou ook moeten werken en heb je die extra codes niet eens nodig.

CSS tekst of kleurverandering bij mouseover is allang bekend voorbeeld. En nu met backgroundimage?

[Tommy The Cat]

... opmerkingen weggehaald, noob gehalte (bij nader inzien) te groot ...

Edit:

Ik heb de tabel waarin de roll-over images stonden verwijderd en ben even schoon begonnen. Ipv de rollover images in een tabel te zetten heb ik ze nu clean in een layout-cell geplaatst en wat ruimte tussen de imagerollovers gehouden.

Dit resulteert erin dat in IE nu alles netjes een handje wordt. In Opera ook, mits ik met de muis éérst op dat plaatje kom.

Welnu daar zal ik dan maar mee moeten leven (edit achteraf: ga CSS gebruiken). Wat ik nog wel vervelend vind is de actieve inhoud melding van IE. Is dit mijn specifieke browserinstelling of krijgen jullie deze melding ook als je een rollover maakt via de insert bar?

[ Voor 74% gewijzigd door Tommy The Cat op 15-03-2008 08:26 ]

[Cascade]

De foutmelding die je krijgt (geel balkje bovenin IE?), is denk ik van JavaScript en niet van ActiveX. Dit komt omdat je de pagina lokaal opent en niet via een server. Doe je dat laatste, is er geen foutmelding weer.

CSS is echt handig voor rollover effecten. Je krijgt dan zoiets:

Cascading Stylesheet:

a { background: transparent url('/images/knop.gif') no-repeat top left; }
a:hover { background-position: bottom left; }

^{niet getest, moet je zelf even mee klooien (grootte van a instellen, selectors etc)}
Als achtergrond plaatje plak je dan de 2 'toestanden' van de knop onder elkaar. Zo heb je ook geen javascript meer nodig...

Verder: tabellen gebruiken voor layout raden veel mensen af.

Het handje hoort automatisch te gaan als je over een <a> element hangt.

[ Voor 7% gewijzigd door Cascade op 14-03-2008 09:27 ]

[Tommy The Cat]

Alrighty. Dat eerste zal ik later eens testen. Voor nu zal ik dan toch maar eens verder kloten met dat CSS om ook zo de rollover image te imiteren.

Het lijkt voor iemand zoals ik die hoopt een goed programma te hebben gevonden waarmee je kunt werken zonder code-kennis echter een stap terug. Qua functionaliteit echter zal het waarschijnlijk juist een stap voorwaarts zijn. Goed bedankt voor de input ik ga me redden.

[b19a]

Wat Cascade voorstelt is heel mooi, maar je kunt natuurlijk ook met 2 achtergrondafbeeldingen beginnen. Als je dat door hebt dan kun naar les 2 voor de geavanceerde technieken.

Cascading Stylesheet:

a { background: transparent url('/images/knop.gif') no-repeat top left; } 
a:hover { background: transparent url('/images/knop-hover.gif') no-repeat top left; }