php jquery html css

file.php

                                <h3>A Snippet of Current TapLynx Users</h3>
									<div class="thumb">
											<?php
												$images = glob("images/logos/*.*");
												$objDOM = new DOMDocument();
												$objDOM->load('includes/logo_names_links.xml');
												$logos = $objDOM->getElementsByTagName("logo");
												echo '<ul>';
												foreach( $logos as $logo ){
													echo '<li class="image-block"><a href="' .$logo->getAttribute('url'). '"><img src="images/logos/'.$logo->getAttribute('imagename').'" title="' .$logo->getAttribute('name'). '" class="table-image" /></a></li>';
												}
												echo '</ul>';
											?>
									</div>
									<div style="clear:both;"></div>
                                <div id="image-info" align="center"><!--this is where the image path will show up--></div>

gistfile1.phtml

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#image-info').hide();
    $('.table-image').mouseover(function(){ // the . references a class
        var imagetitle=$(this).attr('title');
        $('#image-info').html(imagetitle);   //the # means an id name
		
		//find the position of this item
		var position = $(this).offset();
		//position the image-info div based on the items info above
		$("#image-info").css( "left", position.left);
		//alert(position.top-30);
		$("#image-info").css( "top", (position.top-30) );
        $('#image-info').show();

    }).mouseout(function(){
        $('#image-info').html(''); //clear out html in the info div
        $('#image-info').hide();
    });
	
	$('.table-image').fadeTo("slow", 1.0);
	$('.table-image').hover(function(){
		$('.table-image').fadeTo("slow", 0.6); // mousein
	},function(){
		$('.table-image').fadeTo("slow", 1.0); //mouseout
});
});
</script>

styles.css

<!-- Added for logos -->
<style type="text/css">

table.thumb {
	list-style: none;
	margin: 0; padding: 0px;
	width: 360px;	
}
table.thumb tr  {
	margin: 0; padding: 0px;
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
}
table.thumb tr td:hover{
	-moz-border-radius: 15px;
	border-radius: 10px;
	border-style:solid;
	border-width:1px;
	border-color:#CCC;
}

#image-info{
	min-width:12%;
	height:20px;
	font:Tahoma, Geneva, sans-serif;
	background-color:#fff;
	color:#000;
	position:absolute;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border-style:solid;
	border-width:1px;
	border-color:#CCC;
	margin:30px 10px 10px 20px;
}

</style>

xml

<logos>
	<logo name="Discovery News" url="http://itunes.apple.com/us/app/discovery-news/id336742160?mt=8" imagename="discoverynews.png"/>

....