WordPress.org

Forums

WordPress › Support » How-To and Troubleshooting

Image not being displayed in body (5 posts)

  1. ruzbahan
    Member
    Posted 1 year ago #

    I think it is pretty clear what my problem is- http://subyraman.com/?page_id=189

    I'm very bad with CSS and am trying to get the image to fit into my body. I am sure it is an easy solution so what should I do to make it happen? My css right now is

    div.fadehover {
	position: absolute;
	}

img.a {
	position: absolute;
	left: 0;
	top: 0;
        z-index: 10;
	}

img.b {
	position: absolute;
	left: 0;
	top: 0;
	}

    and my HTML markup is

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='http://subyraman.com/wp-content/themes/fresh-and-clean/js/jquery.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("img.a").hover(
function() {
jQuery(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
jQuery(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>

<link rel="stylesheet" type="text/css" href="http://subyraman.com/wp-content/themes/fresh-and-clean/js/mouseover.css" />

</head>

<body>

<div class="fadehover">
<img src="http://subyraman.com/images/pre.jpg" alt="" class="a" />
<img src="http://subyraman.com/images/post.jpg" alt="" class="b" />
</div>

</div>
</body>
</html>

  2. ruzbahan
    Member
    Posted 1 year ago #

    Sorry here's a pastebin for easier reading: http://pastebin.com/t64bBjPh

  3. Ryan Yu
    Member
    Posted 1 year ago #

    First of all, you need to clean your div code a bit.
    Find this code (in page.php)

    <div fadehover"="" style="width:800px; height:500px;>
<div class=">
<img class="a" alt="" src="http://subyraman.com/images/pre.jpg" style="opacity: 1;"><br>
<img class="b" alt="" src="http://subyraman.com/images/post.jpg">
</div>

    and replace it with

    <div>
<img class="b" alt="" src="http://subyraman.com/images/post.jpg">
</div>

    and in your js/mouseover.css find the selector "img.b" (line 12) and remove the absolute position.
    So it will look something like:

    img.b {
    left: 0;
    top: 0;
}

  4. ruzbahan
    Member
    Posted 1 year ago #

    Thank you for the help but I think I am not understanding. If I replace the code as you say, how will it load pre.jpg?

  5. Ryan Yu
    Member
    Posted 1 year ago #

    It seems the issue has been solved?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags