<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>
<Below this line, add a link to the EXACT exercise that you are stuck at.>
<In what way does your code behave incorrectly? Include ALL error messages.>
I’m making a website project for my class. I had the teacher download notepad++ and I plan to send her the my code. I tried to use this code (on notepad++) on my images in order to give it a nicer effect:
```
$(document).ready(function() {
$("img").mouseenter(function() {
$("img").fadeTo("fast", 1);
});
$('img').mouseleave(function() {
$('img').fadeTo("fast",0)
});
});
</script>
<do not remove the three backticks above>
The problem is that it doesn't work on any of my images. By the way they are in a <table>. When I used the same code on code academy though it worked on my images. Is there a difference between Notepad++ and Code academy? Also, is there a way to use this jQuery code only to affect one image at a time?
@dragonflare,
Give us the FULL HTML-code you are using…
here it is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css"/>
<style type="text/css">
body {
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQtorTRr-jC3T666q_t3kShytmEs1YU0MlarWPjyGktkKtTACV2NA");
background-image: height: 60px;
}
a { text-decoration : none;
}
h1 { font-size : 5em;
background-color: white;
}
thead { font-size: 50px;
}
`indent preformatted text by 4 spaces`
#th{ background-color: #ffe6ff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
#bob { background-color:#e6f2ff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;}
td img { height : 200px ;
width : 230px ;
}
div { width : 1000px;
margin: auto;
}
p { background-color:white;
font-size: 23px
}
#radius {border-radius: 10px;}
#right {float:right;
border : 5px solid #ff99cc;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
#left {float:left;
border : 5px solid #cce6ff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
#hi {border-bottom-right-radius: 30px;}
#hello {border-bottom-left-radius: 30px;}
</style>
<title> First webpage</title>
</head>
<body>
<div>
<h1 id= "radius"> Happy Birthday </h1>
</div>
<table id ="right">
<thead>
<th colspan = "3" id ="th">Cute Kittens </th>
</thead>
<tr>
<td> <img src = "data:image/jpeg;base64,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"/>
</td>
<td> <img src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcROxEbrqYlfhUT1qeeL_UX_28aI0gYu2D_Q8zaes_Zx8qXaA5H7"/>
</td>
<td> <img src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRWQwHONGVgO7IT5Y06UeKCKPpGB2cy-_nIwAni33N3uu9Up6agEg"/>
</td>
</tr>
<tr>
<td> <img src = " https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTr6Ye9mR3XnCbtC-Eh5fTlKHrSBSJS6y4_rJnjuTTTw9N0exAD"/>
</td>
<td> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7Mk3wA7pSODBX6pq18SVwsnN-i9Kyj7nKJ48sYIrswM7KrMjA"/>
</td>
<td> <img src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTBw04RoTIMEk55A7DyiwIioeaxZ0MkI2L5YkAtluU9bpgBVeHEbg"/>
</td>
</tr>
<tr>
<td> <img id="hello" src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRkOPqMIpk0BqbT9p7_UrLc8iKG-S-bgEn2xEWB7J8cwQQGAY7j"/>
</td>
<td> <img src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTIKhJjEZfj077APkwkj5sSJu2NsUc-PnaDOa6JOzo2Uy8Yd3qKCw"/>
</td>
<td> <img id="hi" src= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR2m9KcpnVEEKLs8DeXMpFz-sRBOOHKjLy3CSgu1J68qLTyxQHW"/>
</td>
</tr>
<table id ="left">
<thead>
<th colspan= "3" id ="bob"> Cute Puppies </th>
<tr>
<td> <img src = "https://sp.yimg.com/xj/th?id=OIP.M935222b312661fa59f950081517b86ccH0&pid=15.1&P=0&w=298&h=187"/>
</td>
<td> <img src ="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTOYzA6kZ85TptquhHhOSf2TTRkFpeWYWDlkYeTOygX_S10dkVu0w"/>
</td>
<td> <img src ="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTXWlrfc7Lir68y08tvwZ_cyImKPlRsc-ImKbBoTr8zlMeV-fn9_Q"/>
</td>
</tr>
<tr>
<td> <img src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTMwKQSseHFK984R5Bscz08oEQw_UepGvrOg3atmq3HNFf7zFnb"/>
</td>
<td> <img src ="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQsqqyvszOejXFow9AYPBTFbzorm1O18tFMKZHQ-0w1X-PMl-sY"/>
</td>
<td> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQLZU0pBm0wCaE4ckB4AByaRL12MXIBknnRlJ44G7FzBZTB9CywMA"/>
</td>
</tr>
<tr>
<td> <img id="hello" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQE31pGCptX4fn6JWpL4DjGOw7X8NegBKkT0Cx4dZenLB_NMA3M"/>
</td>
<td> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCCTkTvY6ggrypl26r-j9js5cu7R5GWn2YPwRgBdWYx3ol5yi7Ig"/>
</td>
<td> <img id ="hi" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyu6-3ffpPQqA-M-nsF2Haqto1Ooh3DKtYjrkZIPk_GO-kgJ6Z"/>
</td>
</tr>
</table>
</body>
</html>
First off you didn’t close your head tag before adding inline styling, move that outside the head tags
secondly you’re missing the jquery library. Add this to your <head> section </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<title> my site </title>
</head>
<style>
</style>
<body>
</body>
</html>
@dragonflare
Here a basic HTML-code
its your problem to shift around with the CSS definitions…
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css"/>
<style type="text/css">
body {
background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQtorTRr-jC3T666q_t3kShytmEs1YU0MlarWPjyGktkKtTACV2NA) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a { text-decoration : none;
}
h1 {
font-size : 5em;
background-color: white;
}
thead { font-size: 50px;
}
#th{
background-color: #ffe6ff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
#bob {
background-color:#e6f2ff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
td img {
height : 200px ;
width : 130px ;
}
div {
width : 1000px;
margin: auto;
}
p {
background-color:white;
font-size: 23px
}
#radius {
border-radius: 10px;
}
#right {
float:right;
border : 5px solid #ff99cc;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
#left {
float:left;
border : 5px solid #cce6ff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
#hi {
border-bottom-right-radius: 30px;
}
#hello {
border-bottom-left-radius: 30px;
}
</style>
<title> First webpage</title>
</head>
<body>
<div>
<h1 id="radius"> Happy Birthday </h1>
</div>
<table id="right">
<thead>
<th colspan="3" id="th">Cute Kittens </th>
</thead>
<tbody>
<tr>
<td> <img src="//old-man.jpg"/>
</td>
<td> <img src="//old-man.jpg"/>
</td>
<td> <img src="//old-man.jpg"/>
</td>
</tr>
<tr>
<td> <img src="//old-man.jpg"/>
</td>
<td> <img src="//old-man.jpg"/>
</td>
<td> <img src="//old-man.jpg"/>
</td>
</tr>
<tr>
<td> <img id="hello" src="//old-man.jpg"/>
</td>
<td> <img src="//old-man.jpg"/>
</td>
<td> <img id="hi" src="//old-man.jpg"/>
</td>
</tr>
</tbody>
</table>
<table id="left">
<thead>
<th colspan= "3" id="bob"> Cute Puppies </th>
</thead>
</tbody>
<tr>
<td> <img src="//old-man.jpg"/>
</td>
<td> <img src="//old-man.jpg"/>
</td>
<td> <img src="//old-man.jpg"/>
</td>
</tr>
<tr>
<td> <img src="//old-man.jpg"/>
</td>
<td> <img src="//old-man.jpg"/>
</td>
<td> <img src="//old-man.jpg"/>
</td>
</tr>
<tr>
<td> <img id="hello" src="//old-man.jpg"/>
</td>
<td> <img src="//old-man.jpg"/>
</td>
<td> <img id="hi" src="//old-man.jpg"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Have a read
http://stackoverflow.com/questions/8039094/css-with-background-image-without-repeating-the-image
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
google search
== the Book ==
jquery [your question] site:developer.mozilla.org
CSS [your question] site:developer.mozilla.org
javascript [your question] site:developer.mozilla.org
[your question] site:jquery.com
[your question] site:getbootstrap.com
== discussions / opinions ==
jquery [your question] site:stackoverflow.com
CSS [your question] site:stackoverflow.com
javascript [your question] site:stackoverflow.com
I found out what was wrong. I used your jQuery library but if forgot to put another script tag to put my code in it. Here is an example of what I did for it to work:
<script type="text/javascript">
$(document).ready(function() {
$("img").mouseenter(function() {
$("img").fadeTo("fast", 1);
});
$('img').mouseleave(function() {
$('img').fadeTo("fast",0)
});
});
</script>
Thank you for all of your help. It helped a lot!
enter coding in Notepadd++
If we run the html code on IE and Google Chrome then image is displaying but not showing in mozilla firefox.
