Solved

Jquery title caption

Posted on 2013-01-13
2
488 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
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)

786 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