Vraagje over Javascript

Status
Niet open voor verdere reacties.
J

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
[js]
$(document).ready(function(){
$("#box2").hover(function(){
document.getElementByClassName("inrounds2").innerHTML="<img src="checked(2).png"";
})
})
[/js]

Weet iemand hoe ik ervoor kan zorgen dat Javascript dit uitvoert?
Het is de bedoeling dat als je over #box2 met je muis gaat, dat dan de #inrounds2 conent wordt gewijzigd naar de afbeelding 'checked2.png'.
Alleen op dit moment lukt dat niet, omdat Javascript denkt dat innerHTML= al stopt na <img src=, omdat daar de eerste " staan.
Hoe kan ik er voor zorgen dat Javascript de eerste " negeert?
 
Gevalletje quote-gebruik begrijpen :rolleyes:
[js]
document.getElementByClassName("inrounds2").innerHTML = "<img src=\"checked(2).png\">";
[/js]
PS: Waarom ineens "vanilla" Javascript gebruiken terwijl je jQuery hebt geladen?

Bovenstaande in jQuery:
[js]$(".inrounds2").html($("<img>").attr("src", "checked(2).png"));[/js]
 
ehoum, mss met een soortvan button die je niet hoeft te klikken, maar met byvoorbeel OnLoad te gebruiken?
 
Omdat dat niet werkt.
Overigens werkt mijn script ook niet...

Zal ik anders even mijn hele script sturen?

HTML: 
<?php
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Silverworx Nederland | Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.boxes.js"></script>
<?php
include "inc/tags.php"
?>
</head>
<body>
     <div id="boxesandrounds">
         <div id="box1">
             <div id="round1">
                 <span id="inrounds"><img id="picture1" src="heart.png"></span>
             </div>
             <div id="contentbox">Hier komt de tekst.
             </div>
         </div>
         <div id="box2">
             <div id="round2">
                 <span id="inrounds"><img id="picture2" src="check.png"></span>
             </div>
             <div id="contentbox">Hier komt de tekst.
             </div>
         </div>
         <div id="box3">
             <div id="round3">
                 <span id="inrounds"><img id="picture3" src="man.png"></span>
             </div>
             <div id="contentbox">Hier komt de tekst.
             </div>
         </div>
     </div>
</div>
</div>

</body>
</html>

HTML: 
#boxesandrounds {
margin: 0 auto;
width: 100%;
float: left;
}

#box1, #box2, #box3 {
margin-top: 30px;
margin-left: 2.5%;
height: 300px;
width: 30%;
float: left;
border: 1px solid #ecebe9;
}

#round1, #round2, #round3 {
margin: 10px auto;
height: 120px;
width: 120px;
border-radius: 60px;
background: #ecebe9;
}
#contentbox {
margin-top: 0px;
text-align: center;
width: 100%;
height: 75px;
color: #777;
}
#inrounds {
line-height: 155px;
margin-left: 23%;
color: green;
font-family: Verdana;
font-size: 35px;
}
#box1:hover {
box-shadow: 0px 5px 10px #999;
margin-top: 28px;
}
#box2:hover {
box-shadow: 0px 5px 10px #999;
margin-top: 28px;
}
#box3:hover {
box-shadow: 0px 5px 10px #999;
margin-top: 28px;
}
[js]
$("#box2")hover(function(){
$("#cool").attr("src","checked3.png");
});
[/js]
 
Laatst bewerkt door een moderator:
Goh, het werkt niet. Hoe zou dat toch komen...

Zolang je niet eerst bezig gaat met de basis van Javascript begrijpen voordat je van alles wilt maken, ga ik geen tijd en energie meer in je vragen steken.
 
Verkeerd copy paste gedaan bij de javascript code:

[js]
$("#box2")hover(function(){
$("#picture2").attr("src","checked3.png");
});
[/js]
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan