Solved

Jquery title caption

Posted on 2013-01-13
2
482 Views
Last Modified: 2013-01-30
Hello Experts,

I am trying to position the caption in the center of each image the user move the mouse on (hover). here is the script below. can someone tune me please?

<style>
.thumb {
	position:relative;
	display:block;
	width:293px;
	height:92px;
	margin-bottom:7px;	
}
.caption {
	position:absolute;
	width:100px;
	height:50px;	
}
</style>


<div class="thumb">
   <img src="images/01.jpg" alt="image01">
   <img src="images/02.jpg" alt="image01">
</div>

<div class="thumb">
   <img src="images/03.jpg" alt="image03">
   <img src="images/04.jpg" alt="image04">
</div>

$('.thumb img').hover(function() {
		
		var $this = $(this);
		var title = $this.attr("alt");
		
		x=$this.offset().left/2;
		y=$this.offset().top/2;			
		
		if (title !== "") {
		$this.before('<div class="caption">'+ title +'</div>').offset({left:x,top:y});
		}		
	},
	function() {
		$(".caption").remove();	
	});

Open in new window

0
Comment
Question by:Refael
2 Comments
 
LVL 3

Accepted Solution

by:
Khilu earned 500 total points
ID: 38773467
Hi,

Please find below code.

<!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>
    <title>Untitled Page</title>
    <style type="text/css">
        .thumb
        {
            position: relative;
            display: block;
            width: 293px;
            height: 92px;
            margin-bottom: 7px;
            border: 1px solid red;
        }
        .caption
        {
            position: absolute; /*border: 1px solid green;*/
            font-size: 20px;
        }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

</head>
<body>
    <div class="thumb">
        <img src="http://dl.dropbox.com/u/2747215/Gunther1.jpeg" alt="image01" style="width: 293px;
            height: 92px;" />
    </div>
    <div class="thumb">
        <img src="http://dl.dropbox.com/u/2747215/Gunther2.jpeg" alt="image02" style="width: 293px;
            height: 92px;" />
    </div>
    <div class="thumb">
        <img src="http://dl.dropbox.com/u/2747215/Gunther3.jpeg" alt="image03" style="width: 293px;
            height: 92px;" />
    </div>
    <div class="thumb">
        <img src="http://dl.dropbox.com/u/2747215/Gunther4.jpeg" alt="image04" style="width: 293px;
            height: 92px;" />
    </div>
    <div id="canvas">
    </div>

    <script type="text/javascript" language="javascript">
        $('.thumb img').hover(function() {
            var $this = $(this);
            var title = $this.attr("alt");
            //debugger;
            x = ($this.parent().offset().left + ($this.width() / 2));
            y = ($this.parent().offset().top + ($this.height() / 2));

            if (title !== "") {
                var element = $('<div />', { 'class': 'caption' }).css({ 'left': x, 'top': y });
                element[0].innerHTML = title;
                $("#canvas").append(element);
            }
        },
	function() {
	    $(".caption").remove();
	});
        
    </script>

</body>
</html>

Open in new window

0
 

Author Closing Comment

by:Refael
ID: 38834614
thanks i have to test it... soon :-)
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now