Lastig probleem waar ik maar nier uit kom

[bjornbos]

Hallo allemaal,

Ik wil graag op mijn site een weer-icoontje van buienradar-tools. Die staat ergens een beetje onderaan de pagina (dat zonnetje) met deze html code:

<IFRAME SRC="http://gratisweerdata.buienradar.nl/hetweer.php" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=50 HEIGHT=40></IFRAME>

Nu wil ik, dat wanneer je met je muis over dat icoontje gaat, het 2e scherm tevoorschijn komt (nr. 1.2), ook van buienradar-tools:

<IFRAME SRC="http://gratisweerdata.buienradar.nl/buienradar.php" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=256 HEIGHT=406></IFRAME>

Ik heb echt geen idee hoe ik dit voor elkaar kan krijgen. Met een ander plaatje heb ik het zo gedaan:

java code:

<script language="Javascript"> 
<!-- 
if (document.images) 
{
image1 = new Image 
image2 = new Image 
image1.src = 'informationsign1.png' 
image2.src = 'onmousenaam.jpg' 
} 
--> 
</script>

Met als html code:

<div id="bv_Image422" style="overflow:hidden;position:absolute;left:436px;top:694px;z-index:104;" align="left">
<a onMouseOver="document.mouseover1.src=image2.src" onMouseOut="document.mouseover1.src=image1.src">
<img src="informationsign1.png" id="Image422" alt="" align="top" border="0" name="mouseover1"></a></div>

Kan iemand mij een code geven waarbij alles in is verwerkt? Hierbij hoeft geen rekening gehouden te worden met de plek van het plaatje. Het liefst via de methode die ik al gebruik, want daarvan weet ik hoe het werkt. Alvast heel erg bedankt!

Met vriendelijke groeten,

Björn Bos

 

[dieterke]

Bjron je kan dit heel simpel doen met jQuery..

<IFRAME [COLOR="red"]id="main"[/COLOR] SRC="http://gratisweerdata.buienradar.nl/hetweer.php" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=50 HEIGHT=40></IFRAME>


<IFRAME [COLOR="red"]id="sub"[/COLOR] SRC="http://gratisweerdata.buienradar.nl/buienradar.php" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=256 HEIGHT=406></IFRAME>

zet volgende code in je header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/script.js" type="text/javascript"></script>

Nu maak je een map aan 'js' met in deze map de file script.js in deze file zet je het volgende:

$(document).ready(function() {
   $('#sub').css('display','none');
   $('#main').hover(
       function(){
           $('#sub').show(350); //show tijd in miliseconden
       },
       function(){
           $('#sub').hide(350);  //show tijd in miliseconden
       });
});
});

btw, kan zijn dat er nog wel wat foutjes in zitten. Ik heb het hier gewoon geschreven zonder te testen. Dit is in ieder geval het brein achter hoe je zoiets maakt ;-).

intervolg kan je ook beter posts in het javaSCRIPT gedeelte zetten. Java is namelijk helemaal iets anders dan JAVASCRIPT. Wat jij hier wilt is javaSCRIPT

Veel succes!

 

[bjornbos]

Bedankt voor je reactie! Alleen nu gebeurd het volgende, namelijk dat beide plaatjes naast elkaar worden weergegeven. Ik wil dus juist dat plaatje b tevoorschijn komt als je met je muis over plaatje a gaat.

 

[dieterke]

Bedankt voor je reactie! Alleen nu gebeurd het volgende, namelijk dat beide plaatjes naast elkaar worden weergegeven. Ik wil dus juist dat plaatje b tevoorschijn komt als je met je muis over plaatje a gaat.

Als je ze onder elkaar wilt zetten hangt het een beetje van de opbouw van uw website af (wat je nu al kan doen is in uw css file het volgende zetten)

#sub {
clear:both;
}

Anders moet je uw website eens online zetten? Dan kan ik eens een kijkje nemen!

edit: ik snap uw reactie niet zo goed denk ik.. Ik denk dat je dit bedoeld?

$(document).ready(function() {
   $('#sub').css('display','none');
   $('#main').hover(
       function(){
           $(this).hide();
           $('#sub').show(350); //show tijd in miliseconden
       },
       function(){
           $('#sub').hide(350);  //show tijd in miliseconden
           $(this).show();
       });
    });
});

 

[bjornbos]

Sorry, misschien ben ik niet helemaal duidelijk geweest!

Ik wil graag dit:

Helemaal naar beneden scrollen naar het laatste plaatje.