Styling Content Loaded from Ajax
I've created code that loads multiple images from an html file using Ajax into a div in another html file. I have code written to enlarge the image using mouseover() and make it smaller using mouseout(). This code worked prior to removing the images and loading them through Ajax. I would also like to style the image so they're all the same size before the mouseover/mouseout functions are executed. Any ideas on how to accomplish this? Here is my code from the main html file.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Music Stars</title>
<!-- style images here-->
<style>
.resize {
height: 150;
width: 100;
}
</style>
<!-- pulls the ajax file -->
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
//$('.hhImages').add('img').css("height", "150", "width", "100");
//---- CODE TO LOAD HIP HOP ARTISTS ----
$('#hipHop .button').click(function() {
$('.hhImages').load('finalProjectImgHipHop.html');
$(".hhImages").toggle();
});
//---- CODE TO LOAD ROCK ARTISTS ----
$('#pop .button').click(function() {
$('.popImages').load('finalProjectImgPop.html');
$(".popImages").toggle();
});
//---- CODE TO LOAD POP ARTISTS ----
$('#rock .button').click(function() {
$('.rockImages').load('finalProjectImgRock.html img');
$(".rockImages").toggle();
});
//---- CODE TO ENLARGE IMAGES ON MOUSEOVER ----
$("img").mouseover(function(){
$(this).css("height", "400", "width", "200");
});
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Music Stars</title>
<!-- style images here-->
<style>
.resize {
height: 150;
width: 100;
}
</style>
<!-- pulls the ajax file -->
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
//$('.hhImages').add('img').css("height", "150", "width", "100");
//---- CODE TO LOAD HIP HOP ARTISTS ----
$('#hipHop .button').click(function() {
$('.hhImages').load('finalProjectImgHipHop.html');
$(".hhImages").toggle();
});
//---- CODE TO LOAD ROCK ARTISTS ----
$('#pop .button').click(function() {
$('.popImages').load('finalProjectImgPop.html');
$(".popImages").toggle();
});
//---- CODE TO LOAD POP ARTISTS ----
$('#rock .button').click(function() {
$('.rockImages').load('finalProjectImgRock.html img');
$(".rockImages").toggle();
});
//---- CODE TO ENLARGE IMAGES ON MOUSEOVER ----
$("img").mouseover(function(){
$(this).css("height", "400", "width", "200");
});
$("img").mouseout(function(){
$(this).css("height", "150", "width", "100");
});
});
</script>
</head>
<body>
<!-- code for topic -->
<div id="intro"><h1>Celebrities in Music</h1>
<p>
The following artists are popular in Rock, Pop and Hip-Hop music genres.
Click on the button of the corresponding genre to view or hide the images.
</p>
</div>
<div class="artists">
<!-- code for HIP HOP sub-topics -->
<div class="artist" id="hipHop">
<h2>Hip-Hop Artists</h2>
<!-- placeholder for images to load -->
<div class="hhImages"></div>
<!-- button to hide or show images -->
<div class="button">
<input type="button" value="Show/Hide Artists"></input>
</div>
</div>
<!-- code for POP sub-topic -->
<div class="artist" id="pop">
<h2>Pop Artists</h2>
<!-- placeholder for images to load -->
<div class="popImages"></div>
<!-- button to hide or show images -->
<div class="button">
<input type="button" value="Show/Hide Artists"></input>
</div>
</div>
<!-- code for Rock sub-topic -->
<div class="artist" id="rock">
<h2>Rock Artists</h2>
<!-- placeholder for images to load -->
<div class="rockImages"></div>
<!-- button to hide or show images -->
<div class="button">
<input type="button" value="Show/Hide Artists"></input>
</div>
</div>
</div>
$(this).css("height", "150", "width", "100");
});
});
</script>
</head>
<body>
<!-- code for topic -->
<div id="intro"><h1>Celebrities in Music</h1>
<p>
The following artists are popular in Rock, Pop and Hip-Hop music genres.
Click on the button of the corresponding genre to view or hide the images.
</p>
</div>
<div class="artists">
<!-- code for HIP HOP sub-topics -->
<div class="artist" id="hipHop">
<h2>Hip-Hop Artists</h2>
<!-- placeholder for images to load -->
<div class="hhImages"></div>
<!-- button to hide or show images -->
<div class="button">
<input type="button" value="Show/Hide Artists"></input>
</div>
</div>
<!-- code for POP sub-topic -->
<div class="artist" id="pop">
<h2>Pop Artists</h2>
<!-- placeholder for images to load -->
<div class="popImages"></div>
<!-- button to hide or show images -->
<div class="button">
<input type="button" value="Show/Hide Artists"></input>
</div>
</div>
<!-- code for Rock sub-topic -->
<div class="artist" id="rock">
<h2>Rock Artists</h2>
<!-- placeholder for images to load -->
<div class="rockImages"></div>
<!-- button to hide or show images -->
<div class="button">
<input type="button" value="Show/Hide Artists"></input>
</div>
</div>
</div>
</body>
</html>