Good morning world! I've got another problem with my project, this time the JavaScript isn't working, I want the picture to change when I'm holding my mouse pointer over it, thanks for your patience!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<title>Konst UF</title>
<meta charset="utf-8" />
<script type="text/javascript" language="javascript">
if (screen.width <= 699) {
document.location = "mobile.html";
}
document.getElementById("Orderbutton").onclick = function () {
location.href = "http://www.youtube.com/";
};
function billFunction() {
var Bill = getElementById("BillGate");
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
</script>
<body>
<p class="madeby">Made by Albin Karlsson and Oliver Jansson</p>
<center>
<ul>
<li>
<a href="index.html"><p class="Home">Home</p></a>
</li>
<li>
<a href="#"><p class="Products">Products</p></a>
</li>
<li>
<a href="#"><p class="About">About Us</p></a>
</li>
</ul>
</center>
<center><p class="para1">Konst UF</p></center>
<center>
<img
id="BillGate"
src="bill-gates.jpg"
alt="Bill Gates"
class="Billgates"
onmouseover="billFunction()"
/>
</center>
<marquee><h2>Bill GATES</h2></marquee>
<div></div>
<div class="sidepanels1">
<center>
<img class="Konstbild" src="Konst_uf_1.jpg" alt="Konst" />
</center>
<h2>Unknown</h2>
<p>I have no idea haha</p>
</div>
<div class="sidepanels2">
<center>
<img class="Konstbild" src="mikrofiberduk-konst.jpg" alt="Monalisa" />
</center>
<center><h2>Mona Lisa</h2></center>
<center>
<p>Mona Lisa is a painting which was painted by Leonardo Da Vinci</p>
</center>
</div>
<center>
<button
id="Orderbutton"
type="button"
onclick="location.href = 'http://www.youtube.com/';"
>
Order Our Products
</button>
</center>
</body>
</head>
</html>
That was the html code and I hope you could find the problem, if you need the css I got it too:
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
font-size: 30px;
}
div.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
margin-top: 40px;
}
div.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
margin-top: 40px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
div.2nd {
background-color: black;
color: white;
}
img.asus-logo {
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
}
img.Billgates {
margin-top: 30px;
border: 2px solid black;
margin-bottom: 40px;
}
img.Konstbild {
margin-top: 20px;
width: 300px;
height: 300px;
border: 3px solid green;
margin-right: auto;
margin-left: auto;
}
ul {
list-style-type: none;
}
p.madeby {
position: fixed;
}
Thank you !
In your JavaScript change this
function billFunction(img) {
var Bill = document.getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
And in your HTML
<img id="BillGate" src="screenshot_tweet.png" alt="Bill Gates" class="Billgates" onmouseover="billFunction(this)"/>
Also you should comment the onclick code before, it's causing you problems.
A better solution would be to do this only with CSS. It's much easier.
#bill {
background-image: url("bill-gates.jpg");
}
#bill:hover {
background-image: url("Card.jpg");
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments