[HTML][JAVASCRIPT] Roll overimage van andere grootte * - Softwareontwikkeling

zondag 20 mei 2007 19:28

Acties:

Topicstarter

Ik heb het volgende knoppen layout in mijn website:

[home] 50px hoog
[links] 50px hoog
[contact] 50px hoog

nu als er over home wordt gegaan moet het volgende gebeuren

[home] 100px hoog
[ img ] afbeelding
[links] 50px hoog
[contact] 50px hoog

waardoor dus de onderliggende afbeeldingen moeten worden opgeschoven naar beneden om plaats te maken voor een grotere "home-afbeelding"

Nu zou ik dit evt in flash kunnen maken maar het is dan erg lastig met het refreshen van de pagina's om dezelfde layout te houden.

Kan dit simpel weg met javascript worden opgelost? Momenteel werk ik met de dreamweaver optie insert rollover image, echter accepteert deze (logischer wijs) niet dat de rest automatisch gaat opschuiven of dat de rollover image van hoogte veranderd.

Ik weet verder niet echt goede zoek termen die aan dit probleem kunnen voldoen, de sites die ik vind met dezelfde manier van werken zijn allemaal in flash helaas...

Iemand die me op weg kan helpen?

Modelbouw - Alles over modelbouw, van RC tot diorama

zondag 20 mei 2007 20:07

Acties:

BikkelZ

CMD+Z

Heel simpel. Je hebt een property genaamt 'display'. Die kun je op 'block' of op 'none' zetten (onder andere). Je begint in je HTML door al die IMGes op 'none' te zetten, behalve misschien die van de pagina waar je al bent. En dan doe je het volgende bij een onmouseover/onmouseout op de [home] link of wat je wil:

HTML:

1	<div id='homeButton' onmouseover='rollOver(this)' onmouseout='rollOut(this)' /><img src='ergens/plaatje.gif' />

JavaScript:

function rollOver(obj)
{
// we gaan de boel open zetten die we wel willen zien
obj.style.height = '100px';
// ik ga er van uit dat die IMG de DIV volgt waar ik over ol
obj.nextSibling.style.displays = 'block';
}

function rollOut(obj)
{
// en weer terug
obj.style.height = '50px';
obj.nextSibling.style.displays = 'none';
}

iOS developer

zondag 20 mei 2007 20:48

Acties:

Sjoerd

Topicstarter

Een perfecte uitleg! Helaas werkt het niet, waarschijnlijk doe ik iets fout.
Ook snap ik niet precies hoe ik dan mijn normale image zou kunnen veranderen in een andere image.

de code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function rollOver(obj){
    // we gaan de boel open zetten die we wel willen zien
    obj.style.height = '100px';
    // ik ga er van uit dat die IMG de DIV volgt waar ik over rol
    obj.nextSibling.style.displays = 'block';
}
function rollOut(obj){
    // en weer terug
    obj.style.height = '50px';
    obj.nextSibling.style.displays = 'none';
}
</script>
</head>

<body>
<div id="nav">
    <!--navigatie -->
    <div id='home' onmouseover='rollOver(this)' onmouseout='rollOut(this)' /><img src='home_norm.gif' style="display:none"/>
    <div id='links' onmouseover='rollOver(this)' onmouseout='rollOut(this)' /><img src='links_over.gif' style="display:block"/>
    <div id='contact' onmouseover='rollOver(this)' onmouseout='rollOut(this)' /><img src='contact_norm.gif'style="display:none"/>
    </div>
</body>
</html>

Modelbouw - Alles over modelbouw, van RC tot diorama

zondag 20 mei 2007 20:54

Acties:

Janoz

Moderator Devschuur®

!litemod

Het zou iig helpen wanneer je je div als een container gebruikt en niet gelijk weer afsluit. Nu staat het plaatje namelijk niet in de div. De div dus niet afsluiten met een /> maar met een > en dan achter de img een </div> zetten.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

zondag 20 mei 2007 20:57

Acties:

Sjoerd

Topicstarter

Janoz schreef op zondag 20 mei 2007 @ 20:54:
Het zou iig helpen wanneer je je div als een container gebruikt en niet gelijk weer afsluit. Nu staat het plaatje namelijk niet in de div. De div dus niet afsluiten met een /> maar met een > en dan achter de img een </div> zetten.

stomme fout inderdaad, ik zie ze nu in ieder geval al verschuiven en verplaatsen

Modelbouw - Alles over modelbouw, van RC tot diorama

zondag 20 mei 2007 21:24

Acties:

BikkelZ

CMD+Z

Sorry, had de code niet getest

iOS developer

zondag 20 mei 2007 21:26

Acties:

Sjoerd

Topicstarter

BikkelZ schreef op zondag 20 mei 2007 @ 21:24:
Sorry, had de code niet getest

het verschuiven en dergelijke werkt nu dus perfect!!!
Alleen voor het verwisselen van de afbeeldingen moet ik nog iets bedenken nu

Modelbouw - Alles over modelbouw, van RC tot diorama

zondag 20 mei 2007 21:57

Acties:

BikkelZ

CMD+Z

Sjoerd schreef op zondag 20 mei 2007 @ 21:26:
[...]

het verschuiven en dergelijke werkt nu dus perfect!!!
Alleen voor het verwisselen van de afbeeldingen moet ik nog iets bedenken nu

.src

iOS developer

zondag 20 mei 2007 22:22

Acties:

moozzuzz

Je kan ook de moeite doen om es te googlen op rollover images via een google of yahoo oid...

zondag 10 juni 2007 08:41

Acties:

Sjoerd

Topicstarter

Zo even een flinke kick aangezien ik weer tijd heb verder te gaan met de site

Het probleem nu is dat alles al "uitgevouwen" start in Firefox in IE niet al zie je het daar wel verspringen helaas.

Verder is mijn laatste knop altijd zichtbaar, en dit krijg ik maar niet weg

Zijn er uberhaupt wel oplossingen om dit mooi weg te werken??

de url hier

Modelbouw - Alles over modelbouw, van RC tot diorama

zondag 10 juni 2007 13:18

Acties:

Verwijderd

Sjoerd schreef op zondag 10 juni 2007 @ 08:41:
Zo even een flinke kick aangezien ik weer tijd heb verder te gaan met de site
Het probleem nu is dat alles al "uitgevouwen" start in Firefox in IE niet al zie je het daar wel verspringen helaas.

collectie.style.height="20px";

Zal alleen werken in IE, waarom? Collectie word gezien als een variabele in FF, en die is hiervoor nog niet gedeclareerd. (Word niet herkend) Om dit toch werkende te krijgen zul je in de vorm van getElementById() eerst het element moeten ophalen om er vervolgens iets mee te doen.

code:

1	document.getElementById('collectie').style.height="20px";

maandag 11 juni 2007 10:57

Acties:

Sjoerd

Topicstarter

Oke het werkt!
klikkerdeklik

heb nu ook het verspringen eruit kunnen halen door de divs gwn te laten starten op 20px

Echter heeft iemand nog een geniale oplossing om de laatste img niet zichtbaar te maken in het begin?
Want nu staat deze eral.

Natuurlijk zou de tekst "ondertekst" ook niet mogen verspringen, maar dit is kwestie van het aanpassen voor de div style dus dat lukt wel.

Modelbouw - Alles over modelbouw, van RC tot diorama

maandag 11 juni 2007 18:22

Acties:

moozzuzz

hmmzz. Hier werkt het niet. (js-error in IE7 IE6)

[ Voor 10% gewijzigd door moozzuzz op 11-06-2007 18:22 ]