Toon posts:

Roll over maar dan anders ...

Pagina: 1
Acties:

dinsdag 17 februari 2004 09:44

Acties:

Verwijderd

Topicstarter
Het volgende zou ik graag willen realiseren,

Ik zou graag een image map maken waarbij rollover van de verschillende componenten steeds tekst en uitleg verschijnt. Deze tekst zou bij alle rollover componenten op dezelfde plaats moeten komen.

Dus aan de linker zijden een imagemap en rechts een ruimte voor de teksten.

Criterium is vanuit het stagebedrijf is dat het in HTML moet. Kan het uberhaupt, en zo ja, hoe ??

dinsdag 17 februari 2004 09:45

Acties:
  • bonzz.netninja
  • Registratie: Oktober 2001
  • Laatst online: 13:14

bonzz.netninja

Niente baffi

met javascript kan dat prima, mag javascript wel?

vuistdiep in het post-pc tijdperk van Steve  | Joepie joepie. Dat ging echt toppie! | https://www.wegmetbigtech.nl

dinsdag 17 februari 2004 09:45

Acties:
  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

met javascript.

met een onmouseover en een getElementById en een innerHTML

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 17 februari 2004 09:47

Acties:

Verwijderd

kan ook met css (:hover) en de behaviour van clay die dat ook mogelijk maakt voor MSIE

dinsdag 17 februari 2004 09:50

Acties:

Verwijderd

Topicstarter
bonzz.netninja schreef op 17 februari 2004 @ 09:45:
met javascript kan dat prima, mag javascript wel?
Ja neem al van wel, alleen mijn java kennis is prut.

Dus als we het over java gaan hebben graag voorbeelden. Beetje met code knutselen zal wel gaan lukken, bedenken is weer een ander verhaal nietwaar |:(

om java te draaien is toch alleen javaVM noodzakelijk nietwaar ?

dinsdag 17 februari 2004 09:53

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op 17 februari 2004 @ 09:47:
kan ook met css (:hover) en de behaviour van clay die dat ook mogelijk maakt voor MSIE
You name it ..... sorry volg het ff niet helemaal! Doe bedrijfskundige informatie, dus vergeef mij mijn beperkte kennis van allerlei scripts en talen.

dinsdag 17 februari 2004 09:53

Acties:
  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

javascript

java is heel wat anders en www.google.com is daarbij uw vriend.

en mophor. hoe wil je de content van een stuk veranderen in een hover. dat kan alleen met opera met de css behaviour content. topicstarter, deze laatste zit is niet voor jou besteed voor ik je weer door de war breng

[ Voor 79% gewijzigd door disjfa op 17-02-2004 10:01 ]

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 17 februari 2004 09:58

Acties:

Verwijderd

zie [rml][ css] meer css met htc voor IE[/rml]
en http://www.w3schools.com/css/default.asp

(en m'n sig, eventueel, maar aan die ref wordt nog gewerkt)

@disjfa: niet de content veranderen, gewoon verschillende elementen showen en hiden, het lijkt me wenselijk als alle info sowieso in de html te vinden is in het kader van usability

[ Voor 35% gewijzigd door Verwijderd op 17-02-2004 09:59 ]

dinsdag 17 februari 2004 10:15

Acties:

Verwijderd

Topicstarter
Dit zoek ik dus .......

http://www.virtualgeoff.c...lovers/rollover_imagemap/

Het kan dus blijkbaar prima, en zo te zien in de source code is het idderdaad gewoon een kwestie van hiden. Maar nu kan ik nog de fokking css niet zien.

dinsdag 17 februari 2004 10:21

Acties:
  • darkrain
  • Registratie: Augustus 2001
  • Laatst online: 14:25

darkrain

Moderator Discord / General Chat

Geniet. Punt.

je hebt die css ook niet nodig.
het zijn twee functies die je nodig hebt.

Tweakers Discord

dinsdag 17 februari 2004 10:42

Acties:

Verwijderd

Topicstarter
Misschien heeft iemand zin en tijd om ff met mij mee naar deze code te kijken:

---------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Javascript Junkyard - Imagemap Rollover (with Target)</title>
<link rel="stylesheet" type="text/css" href="../../junkyard.css">

<script language="JavaScript" type="text/javascript">
<!--

if (document.images) {
nav1on = new Image(); nav1on.src = "navs/nw.gif";
nav2on = new Image(); nav2on.src = "navs/ne.gif";
nav3on = new Image(); nav3on.src = "navs/sw.gif";
nav4on = new Image(); nav4on.src = "navs/se.gif";
navoff = new Image(); navoff.src = "navs/compass.gif";
target1on = new Image(); target1on.src = "navs/nw-text.gif";
target2on = new Image(); target2on.src = "navs/ne-text.gif";
target3on = new Image(); target3on.src = "navs/sw-text.gif";
target4on = new Image(); target4on.src = "navs/se-text.gif";
targetoff = new Image(); targetoff.src = "navs/text.gif";
}

function rollOn(img1,img2,text){
str = "window.status = '" + text + "'";
if (document.all) setTimeout(str,5); // this is a hack to fix bug in IE on PC
else window.status = text;
if (document.images) {
document.navs.src=eval(img1 + "on.src");
document.target.src=eval(img2 + "on.src");
}
}

function rollOff(){
window.status = "";
if (document.images) {
document.navs.src=navoff.src;
document.target.src=targetoff.src;
}
}

//-->
</script>

</head>

<body>

<h3 align="center">Imagemap Rollover (with Target)</h3>

<br><br>

<map name="compassMap">
<area shape="RECT" coords="0,0,59,59" href="northwest.html" alt="NW" onmouseover="rollOn('nav1','target1','North West'); return true;" onmouseout="rollOff(); return true;">
<area shape="RECT" coords="60,0,119,59" href="northeast.html" alt="NE" onmouseover="rollOn('nav2','target2','North East'); return true;" onmouseout="rollOff(); return true;">
<area shape="RECT" coords="0,60,59,119" href="southwest.html" alt="SW" onmouseover="rollOn('nav3','target3','South West'); return true;" onmouseout="rollOff(); return true;">
<area shape="RECT" coords="60,60,119,119" href="southeast.html" alt="SE" onmouseover="rollOn('nav4','target4','South East'); return true;" onmouseout="rollOff(); return true;">
</map>

<center>
[img]"navs/compass.gif"[/img]
[img]"navs/text.gif"[/img]
</center>

</body>
</html>
---------------------------------------------------------------------------------------------------------

nu rest mij een aantal vragen:

1) Waar wordt de positie van de "target" bepaald
2) In mijn situatie veranderd alleen de target en dus niet het plaatje, wat kan ik dan allemaal weglaten. dat hele verhaal met :

nav1on = new image

komt te vervallen alsook:

document.navs.src=eval(img1 + "on.src");
document.target.src=eval(img2 + "on.src");

neem ik aan ...

dinsdag 17 februari 2004 10:44

Acties:
  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

Mischien is een tutorioal javascript handiger. De code die je nu wilt inpikken is niet bepaald mooi. En het kan een stuk handiger.

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 17 februari 2004 10:59

Acties:

Verwijderd

Topicstarter
disjfa schreef op 17 februari 2004 @ 10:44:
Mischien is een tutorioal javascript handiger. De code die je nu wilt inpikken is niet bepaald mooi. En het kan een stuk handiger.
ik zal wel eens kijken.... alleen het is gen hobby of zo, dus er is sprake van enige tijdsdruk. Het was alleen leuk geweest voor een in online help die ik aan het schrijven ben. Of de code nu mooi is of niet maakt me niet zo veel uit, het criterium is eerder of het werkt of niet. Met andere woorden ik wordt niet beoordeeld op de code, maar op het resultaat op het scherm, code boeit het bedrijf hier niet ;)

dinsdag 17 februari 2004 12:20

Acties:

Verwijderd

Verwijderd schreef op 17 februari 2004 @ 09:44:
Ik zou graag een image map maken waarbij rollover van de verschillende componenten steeds tekst en uitleg verschijnt. Deze tekst zou bij alle rollover componenten op dezelfde plaats moeten komen.

Dus aan de linker zijden een imagemap en rechts een ruimte voor de teksten.
Komt aardig in de buurt
Criterium is vanuit het stagebedrijf is dat het in HTML moet. Kan het uberhaupt, en zo ja, hoe ??
Dat kan niet puur in HTML. Het kan alleen i.c.m. een client-side scripttaal zoals JavaScript.
Verwijderd schreef op 17 februari 2004 @ 09:47:
kan ook met css (:hover) en de behaviour van clay die dat ook mogelijk maakt voor MSIE
Leuk idee, maar volgens mij kan dat niet i.c.m. een imagemap. In een AREA element mogen namelijk volgens mij geen andere elementen.

dinsdag 17 februari 2004 13:17

Acties:

Verwijderd

Topicstarter
[quote]

Komt aardig in de buurt

[quote]


Klopt, maar mijn kennis m.b.t. javascript stelt mij niet in staat op achterliggend script naar mijn hand te zetten.

Toch bedankt voor het voorbeeld

dinsdag 17 februari 2004 13:56

Acties:

Verwijderd

Verwijderd schreef op 17 februari 2004 @ 13:17:
Klopt, maar mijn kennis m.b.t. javascript stelt mij niet in staat op achterliggend script naar mijn hand te zetten.
Tja, dan houdt het wel een beetje op, he? Dit is nou eenmaal geen standaardfunctionaliteit dus er zal een beetje eigen inbreng nodig zijn. Ik zal een beetje proberen de code uit te leggen.

Het stelt in feite heel weinig voor; In de HTML heb je een standaard IMG/MAP/AREA combinatie. De AREAs hebben een onmouseover event setVisual(i). Aan de hand van die i wordt een bepaalde tekst zichtbaar.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- DE IMAGEMAP -->
<div class="visualImageDIV">
    [img]"gfx/jouwplaatje"[/img]
    <map name="YourMap">
        <!-- DE AREAS -->
        <area href="#" onmouseover="setVisual(1);" 
            shape="rect" coords="..." />
        <area href="#" onmouseover="setVisual(2);" 
            shape="rect" coords="..." />
    </map>
</div>

<!-- DE BIJBEHORENDE TEKSTEN -->
<div id="visual1">
    <h2>Lorem ipsum 1</h2>
    <p class="intro">Dolor sit amet.</p>
</div>
<div id="visual2">
    <h2>Lorem ipsum 2</h2>
    <p class="intro">Dolor sit amet.</p>
</div>


Dit is de vereenvoudigde versie van de JS waarbij het plaatje zelf niet verandert; alleen de teksten worden (on)zichtbaar.
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13

// --------------------------------
function setVisual( iItem ) {
// --------------------------------

    // Maak de eventuele huidige select ongedaan
    if(_sVisual) document.getElementById(_sVisual).style.display = 'none';
    
    // Zet de nieuwe selectie
    if(_oVisual) {
        document.getElementById('visual' + iItem).style.display = 'block';
        _sVisual = 'visual' + iItem;
    }
}


Het enige wat je hoeft te doen is deze JavaScript functie te includen en de HTML op de juiste punten aan te passen op je eigen wensen:
  • Zet je plaatje erin
  • Zet de teksten erin
  • Pas de coordinaten van de AREA's aan.

dinsdag 17 februari 2004 14:57

Acties:

Verwijderd

Topicstarter
Heel fijn !

_/-\o_ BLUES _/-\o_
Pagina: 1
Reageer