info tonen

Status
Niet open voor verdere reacties.

JEPEDEWE

Terugkerende gebruiker
Lid geworden
14 jun 2006
Berichten
1.697
Hallo,
Weet niet goed hoe dit uit te leggen en OF het sowieso kan maar ik zou graag het volgende willen:

Op een webpagina staan een aantal jpg bestandjes
Als de "bezoeker" over een jpg bestand beweegt met de cursor, opent er zich een venstertje met wat informatie over dit item
Gaat de cursor weg dan verdwijnt dit informatiebalkje ook weer

Hoe ga ik te werk?

Bedankt
 
Selecteer in Dreamweaver de afbeelding, daarna kun je onderin je scherm bij PROPERTIES bij het invoervelt ALT je tekst invoeren.
 
OK maar da's plain tekst... ik wil het iets grafischer... dus bvb een tekst dat ik in een ander jpg bestandje gestoken heb en dat verschijnt als ik over het initiele jpg bestandje schuif met de cursor

MVG
JP
 
Normaal heb je de code van een afbeelding die eruit ziet als volgt,

HTML:
<img src="afbeelding.gif" />


Voor de mouse-over wordt hieraan dan een code toegevoegd, een code voor de afbeelding die standaard wordt getoond bij een mouse-out en een code waarmee de afbeelding wordt gedefinieerd voor de mouse-over.

In de code vul je dan het juiste pad en de naam van de afbeelding in.

HTML:
<img src="naamplaatje" onmouseover="this.src='afbeelding.gif'" onmouseout="this.src='afbeelding.gif'" />
 
Ja, dat zou kunnen als de twee afbeeldingen even groot zijn. Als dat niet zo is, moet er wat css-moeite gedaan worden om het grotere tweede img niet de layout overhoop te laten gooien zodra er gehoverd wordt.

Maar het kan ook zonder javascript, met alleen css.
Met vriendelijke groet,
CSShunter
 
In de code staat het volgende:

<map name="Map2">
<area shape="rect" coords="306,330,443,458" href="#">
</map>

ik heb dus een jpg bestand en als ik over een deel van de figuur schuif, wil ik dat er een ander jpg opent met meer info ivm het deel van de figuur waar je overheen schoof.
Schuif je weg dan moet dit nieuwe jpg-bestandje ook weer verdwijnen natuurlijk

Ik deed het ooit met layers die dan visible of invisible werden maar dat was nogal slordig en ik weet ook bij God niet meer hoe ik dat ooit gedaan heb.:confused:

Bedank voor jullie hulp
JP
 
Ah! Da's andere koek! :eek:

1. Met <area> en javascript
Als je het met een map-area wilt doen, wordt het een heel ander verhaal. Dan kan het niet met een css-popup, maar moet er javascript aan te pas komen.
Er worden daar <div>'s met een tekst-toestand opgeroepen, maar met een image er in kan het ook.
=====

2. Zonder <area> en zonder javascript
Maar zonder javascript blijft het ook kunnen, dan gebruik je geen image-map maar zet je de grote afbeelding er in als background-image. En met css rangeer je het te be-hoveren oppervlakje naar de goede positie:
Op dezelfde manier kan je meer plekjes op de afbeelding maken, waar je kan hoveren voor een popup'je.
=====

Persoonlijk vind ik de laatste methode mooier: die werkt ook als javascript uit staat, en de html blijft mooi schoon.

Alleen als er méér dan 1 oppervlakjes moeten zijn die hele grillige vormen hebben (niet rechthoekig) en als puzzelstukjes in elkaar grijpen, dan kan het niet met de css-methode; dan moet er een area met javascript gebruikt worden.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
inderdaad het 2de voorbeeld is beter
hoe doe ik dat binnen dreamweaver?
Moet ik dan (als beginnertje) naar de code
waar vind ik dan de code terug voor die toepassing

heel erg bedankt

JP
 
In het bijgevoegde filmpje kun je zien hoe dat moet in IE, Firefox en Googlecrome

http://www.mijnbestand.nl/Bestand-ID6PZ4WZA76C.wmv

Ik zou in dreamweaver het CSS bestand van de website openen en vervolgens de code die tussen de HEAD staat hierin copyeren

Code:
body {
	width: 700px;
	margin: 20px auto;
	}

p {
	text-align: center;
	}

img {
	border: 1px solid #C0C0C0;
	vertical-align: top;
	}

#pop { /* oppervlak wat geraakt moet worden door de hover */
	width: 80px;
	height: 58px;
	margin: 72px 0 0 328px;
	position: relative;
/*	border: 1px solid red; tijdelijk om te zien waar je zit */
	}

#pop img { /* normale toestand: buiten beeld */
	position: absolute;
	left: 0;
	margin-left: -9999px;
	}

#pop:hover {
	cursor: help;
	}

#pop:hover img { /* op z'n plek bij een hover */
	top: 75px;
	left: 50%;           /* linkerkant in het midden van de kleine  */
	margin-left: -125px; /* en dan de helft v/d grote naar links    */
	}

#pop-background {
	width: 653px;
	height: 241px;
	margin: 0 auto;
	background: url(images/vw-supergroot.png);
	border: 1px solid #C0C0C0;
	}

en vervolgens het volgende stukje op de juiste plek tussen de BODY plaatsen (je website)
HTML:
<div id="pop-background">
	<div id="pop">
		<img src="images/vw-250x180.png" width="250" height="180" alt="" />
	</div>
</div>

Je moet nog wel de afbeelding aanpassen...

Het filmpje kijken hoeft dus niet, omdat de code hier al staat ;)
 
Laatst bewerkt:
Hey mannen

Heel erg bedankt voor jullie inzet, maar dit gaat mijn petje zwaar te boven..
Heb geprobeerd met wat code te copieren en zo, maar waarschijnlijk niet op de goeie manier, dus resultaat 0

vind het jammer van jullie inspanning, maar kan het ook niet helpen...
dacht dat de oplossing eenvoudiger zou geweest zijn

op de "oude" site kan je zien hoe ik het vroeger deed maar dus niet meer weet hoe:
http://users.telenet.be/websitedbi/Paginas/BUSO.html
ga naar virtuele toer
et voila


JP
 
Hieronder staat de code zoals die in de virtueletour staat.
Ik heb deze wat uitgekleed zodat hij misschien wat beter te begrijpen is.
tussen de tekst heb ik wat uitleg gezet zodat je weet wat waar gebeurd.
copieer onderstaande code en plak deze in bv je notepad (tekstverwerker) en sla dit op als HTML bestand, open dit bestand dan met je webbrowser.
Als je met de muis over het gebied bij de achterband gaat en bij de trekhaak, zullen er verschillende afbeeldingen tevoorschijn komen.

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JEPEDEWE Virtuele Toer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<!-- Bovenstaande tekst, die begint met function kun je beter niet veranderen -->
<!-- Hieronder bepaal je welke afbeelding er tevoorschijn komt, hoe groot deze is en waar hij komt te staan.  -->
<style type="text/css">
<!--





#naar_garage {
	position:absolute;
	width:200px;
	height:133px;
	z-index:19;
	left: 978px;
	top: 75px;
	visibility: hidden;
	background-image: url(http://www.breman.net/cms/domainfiles/1/layout/200x133_Cootjespakhuis.jpg);
}
#garage1 {
	position:absolute;
	width:200px;
	height:150px;
	z-index:20;
	left: 13px;
	top: 321px;
	visibility: hidden;
	background-image: url(http://www.breman.net/cms/domainfiles/1/layout/200x150_kaaihof-sfeerfoto.gif);
}
#Garage2 {
	position:absolute;
	width:200px;
	height:150px;
	z-index:21;
	left: 16px;
	top: 51px;
	visibility: hidden;
	background-image: url(http://www.breman.net/cms/domainfiles/1/layout/200x150 nagelsalon 2011.jpg);
}

.style17 {font-family: Tahoma; font-size: large; font-weight: bold; color: #66CC00; }

-->
</style>
</head>

<body bgcolor="#BFBFBF" text="#CCCCCC" link="#000000">
<div align="center">
  <div align="center">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="98%" bgcolor="#666666"><div align="center"><span class="style17">JEPEDEWE </span></div></td>
      </tr>
    </table> <!-- hieronder staat de afbeelding die je op de website ziet -->
    <p><img src="http://www.breman.net/cms/domainfiles/1/news/qj7okwyeapfw9ras.JPG" width="600" height="432" border="0" usemap="#Map" onClick="MM_showHideLayers('Garage2','','show')" ></p>
    <p>&nbsp;    </p>
    <!--Hieronder staan de id's, voor elke afbeelding die tevoorschijn moet komen ben je er 1 nodig -->
    <div id="garage1"></div>
    <div id="Garage2"></div>

    <div id="parking"></div>
    <div id="naar_garage"></div>



    <map name="Map">

                           <!--hieronder selecteer je het gebied voor de mouse over en welke id tevoorschijn moet komen. -->

  <area shape="poly" coords="468,293,557,272,553,256,467,274" href="#" onMouseOver="MM_showHideLayers('naar_garage','','show')" onMouseOut="MM_showHideLayers('naar_garage','','hide')">

  <area shape="poly" coords="400,287,445,282,448,350,403,353" href="#" onMouseOver="MM_showHideLayers('garage1','','show','Garage2','','show')" onMouseOut="MM_showHideLayers('garage1','','hide','Garage2','','hide')">
  
    </map></div>
</div>
</body>
</html>

Ik hoop dat je hiermee uit de voeten kunt.

Ps. als je op de mouseover plekken klikt, kun je zien hoe groot het area is.
 
Laatst bewerkt:
denk dat ik het nu door heb...

Heel erg bedankt

Nu wat experimteren....

JP
 
Deze topic was voor mij ook erg leerzaam, want ik wist niet dat dit ook mogelijk was, en hoe dit moest.

csshunter en JEPEDEWE ook bedankt.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan