Develop Reference

javascript image rollover not just on image, but on empty sides too

The rollover works on the image itself, changing from one image to another then back again, but the problem is that it the image also changes on each side of the image on rollover where there is blank space.
I know there it can be done better in CSS, but it is a school assignment and must be in javascript. Below is the code in HTML, then what I have for it in CSS
HTML
<script>
imageout=new Image();
imageout.src="Pics/Image1.jpg";
imageover=new Image();
imageover.src="Pics/Image2.jpg";
function image_out(){
document.images['imageout'].src="Pics/Image1.jpg";
}
function image_over(){
document.images['imageout'].src="Pics/Image2.jpg";
}
</script>
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"
onmouseout="image_out();"><img src="Pics/Image1.jpg" class="center"
id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap"></a>
CSS
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
If someone can point out my error or if there is a better way to do this (must be javascript), I would certainly appreciate it!

As I have mentioned in the comment, block level elements will cover the entire row, So remove the class center from your anchor tag and If you want to align the items in middle then change your structure of html like below.
<div class="center">
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"onmouseout="image_out();">
<img src="https://www.delecta.co.za/wp-content/uploads/sample.jpg" id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap">
</a>
</div>
DEMO

Why do my html img disappears suddenly and i need to clear caches?

As I said in the title, I have an HTML img tag that displays a normal .svg image. The image is juste a picture of a television, inside the screen of this television I want to display a slider (that I've created).
The image size is 128Ko.
This is the part of the code:
<div class="screen-img">
<ul class="list-img-onScreen">
<li class="img-1"><img src="img/img1.png"></div></li>
<li class="img-2"><img src="img/img2.png"></div></li>
</ul>
</div>
<img src="css/img/television.svg" class="img-TV">
What I want is to display ul of images inside a picture of a television (which is the television.svg). when I've first seen the result on chrome browser it was awesome, I've got the television and inside it's screen there was my slider of pictures defiling one after one. But after working on this page for about one week (adding other stuff in this page) I've realized that the television.svg disappears, the slider of pictures still there but not the television. When I clear caches the television appears.

Why not use the image as the background of your div ?
Look here: jsfiddle
HTML:
<div class="bgimg">
Here your slide show...
</div>
CSS:
.bgimg {
width: 280px;
height: 203px;
background-image: url('http://pngimg.com/upload/tv_PNG477.png');
background-size: contain;
background-repeat: no-repeat;
padding: 20px;
}

Trying to get a mouseover on an overlay with jquery tools

I have things almost where I want them. When I started working with jquery tools, I didn't realize that the project was dead and that the forums seem permanently down. However, I ALMOST have what I need.
All I need at this point is to get the mouseover working for areas on an imagemap. I have the click working. The work in progress is at http://mtauburn.netcontrolinc.com/joomla/contact-us/360-joomla-content
I have an image with an image map
<img name="circle" src="images/mt-auburn-360.jpg" alt="mt-auburn-360" usemap="#mt-auburn-360-map" />
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
There is some css styling
I am preloading the images but I'm not sure that is necessary.
<script language="javascript" type="text/javascript">// <![CDATA[
Image0 = new Image(800, 659)
Image0.src = "http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360.jpg"
Image1 = new Image(800, 659)
Image1.src = "http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-1.jpg"
Image2 = new Image(800, 659)
Image2.src = "http://mtauburn.netcontrolinc.com/joomla/images/mt-
(clipped out the repetitive code
// ]]>
I have functions that were handling the overlay of the slices in my old version. I don't think this is necessary with jquery tools
//
}
function slice4() {
document.circle.src = Image4.src;
This code seems to be what makes the jquery tools actually work. I added the area, onhover and onmouseover to try to get it to work.
$(document).ready(function() {
$("img[rel]").overlay();
$("area[rel]").overlay();
$("onhover[rel]").overlay();
$("onmouseover[rel]").overlay();
});
There is code which does the styling of the overlay
<style>
/* the overlayed element */
.simple_overlay {
/* must be initially hidden */
display:none;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:675px;
min-height:200px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(/media/img/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
Here is the code that links the image for the overlay of one of the slices
<div name="slice1ovr" class="simple_overlay" id="slice2">
<!-- large image -->
<img src="images/mt-auburn-360-slice-2.jpg" />
<!-- image details -->
<div class="details">
<h3>The Barcelona Pavilion</h3>
<h4>Barcelona, Spain</h4>
<p>The content ...</p>
</div>
</div>
And then I have my image map, part of it is here
<area shape="poly" coords="397,278,476,140,530,182,565,238,577,284,580,318,421,319,415,293" alt="National Training Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-1.jpg" onmouseover="slice1()" onmouseout="original()">
<area shape="poly" coords="399,359,483,492,530,456,561,405,575,363,581,319,421,319,417,341" alt="National Performance Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-2.jpg" rel="#slice2" $("#slice2").overlay({event:'mouseover'});" onmouseout="original()" >
<area shape="poly" coords="350,361,278,503,324,519,364,526,425,520,485,495,398,359,376,366" alt="National Retention Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-3.jpg" onmouseover="slice3()" onmouseout="original()">
<area shape="poly" coords="328,317,169,317,175,382,200,430,242,479,277,501,351,359,332,340" alt="National Purchasing Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-4.jpg" onmouseover="slice4()" onmouseout="original()">
If you mouse over any of the slices, the images swap with my original document.circle code in the functions. However, I could not get any transitions to work with that. So, I tried jquery tools. If you click on the slice that is around the 3 o'clock position, an overlay shows that has the css formatting.
All I need to do to finish this is to figure out how to make the overlay appear on a mouseover instead of a click.
I'd really appreciate any help
thanks

I think you want something like this:
$('.hover-element').mouseover(function(){
$('overlay-selector').overlay({
load:true //this makes the overlay load when function is called instead of on click
});
});
http://api.jquery.com/mouseover/
The default overlay loads on a click, so see the section titled 'Opening overlays programmatically' here:
http://jquerytools.org/demos/overlay/trigger.html

I cannot get thumbnails in Jquery cycle plugin, only text numbers

I'm terrible at javascript and css, but I did manage to implement the Jquery Cycle plugin into my homepage. I tried to add thumbnails, so while it's still cycling on auto, the end-user can click a thumbnail to go back, instead of having to wait 8 or 9 slides later.
javascript code:
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init() {
// dynamically add a div to hold the slideshow's pager
$(".homepageimages").before('<div class="pager"></div>');
// now to use the cycle plugin
$(".homepageimages").cycle({
pause: 1,
pager: ".pager"
});
}
</script>
HTML code:
<div id="slideshow">
<div class="homepageimages"
<asp:Hyperlink ID="HyperLink1" runat="server"
ImageUrl="~/images/usshomepagegraphic.jpg" height="319" width="864"
NavigateUrl="~about.aspx" Target="_self"></asp:HyperLink>
<asp:Hyperlink ID="HyperLink4" runat="server"
ImageUrl="~/images/collage.jpg" height="319" width="864"
NavigateUrl="~services.aspx" Target="_self"></asp:HyperLink>
</div>
</div>
css:
.slideshow {
height: 319px;
width: 864px;
padding: 0;
margin: 0;
}
.slideshow img {
padding: 0px;
border: 0px solid #ccc;
background-color: #eee;
width: 864px;
height: 319px;
top: 0;
left: 0
}
Here's a photobucket link to what I'm looking at. The picture is of my cycler, and the pager link is in the upper left -- just text numbers 1-7, for all 7 slides:
http://s1209.photobucket.com/albums/cc387/jdluski/?action=view&current=jquerythumbnails.png
But I cannot turn these text numbers into thumbnails. Whenever I try, from the Jquery Cycle's instructions or some other persons's online instruction, usually the pictures just end up right on top of one another, or I get a long, huge error message in my browser.
I'd like to continue cycling on auto, but have thumbnails in case the end user wants to go back, but I'm at an impasse. I'm to the point now where I'm so confused, I don't know what to even try to tinker with, the jquery.cycle.all.js file, the javascript, the css, the html.
Thanks a bunch for reading this, and all help would be sincerely appreciated!
Jason Weber

As you are not good at JS try using this plugin which is ready to serve your purpose.
http://wayfarerweb.com/jquery/plugins/simplethumbs/
It has ready thumbnail option.

jQuery with Wordpress Loop. Show / Hide content?

At the moment I have a website that grabs the 12 most recent posts from a category, and displays them as a link to their permalink, with the post thumbnail image as the link image.
You can see a working example here: http://mathewhood.com/sitefiles/
What I want to do, is somehow add functionality into my loop that will allow me to make it so that when you click on one of these list elements, it will display the_content(); for each element.
I found this - http://gsgd.co.uk/sandbox/jquery/easing/ Which I think may provide the functionality that I want (ideally jswing in and out), but I am struggling at implementing it! If anyone knows how I could make this happen please answer this and receive your well deserved up-votes!
http://jsfiddle.net/XzJgU/ - Here is my current loop so far, any help will be greatly appreciated!!!!!!!!!

Here is my solution to your problem. I'm giving an example on how to implement jquery Easing.
EDIT
revised my post, please
View revised sample here
Hope it helps.
$('.thumbs').click(function(e){
e.preventDefault();
var contents = $(this).closest('.recentPost').find('.caption').html();
var $container = $('#theContainer').html(contents);
$container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:100}, {duration: 1000, easing: 'easeInOutCirc'});
$container.click(function(){
$container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
$container.fadeOut('slow');
$container.html('');
});
});

Something like that should work - http://jsfiddle.net/XzJgU/5/. It renders the content for each post in the loop, hidden by default using CSS. When a post is clicked, it moves its content to #displayed-post, making it visible. When another post is clicked, its moves back to its original container and the new post content is moved there.

I'm not entirely clear on how you want this to work - are you looking for a PHP solution or a JavaScript one or perhaps a mix of the two. I've got two suggestions on how you might make it work. Also, note that the jQuery library you're referring only adds easing options to jQuery - i.e. it only deals with animation and not with the business logic and behaviour of your code.
Using ajax
This should work in this case since you're not making cross-domain requests. Essentially, you'd intercept the click to the link, figure out where it's pointing and then make a GET request to that page. You'd then filter out the appropriate HTML from the response and put it into your page. Something like this:
$('.recentPost a').click(function(){
$.get($(this).attr('href'), function(data){
//make a get request to the page the link linked to
//and extract the blog content div
$("placeholder").html($(data).filter(".blogRight"));
});
return false; //cancel the browser's default action on click to keep user on page
});
where you'd have a <div id="placeholder" /> in your HTML page where you'd like the content to appear.
Using PHP + JavaScript
Instead of fetching the content on demand, you'd generate it when the page loads but keep it hidden. You'd again intercept clicks but this time you'd find and display the appropriate, existing div on the page.
So your generated page would look something like this:
<div id="contentWrap">
<div class="hidden-featured-content" id="content-f12">
<div>Your content here</div>
</div>
<div class="hidden-featured-content" id="content-f11">
<div>Your content here</div>
</div>
<div id="newBanner"></div>
<div class="recentPost">
<img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" />
<a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
<div class="captionTitle">Hello World 12!</div>
<p></p>
</div></a>
</div>
<div class="recentPost">
<img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" />
<a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
<div class="captionTitle">Hello World 11!</div>
<p></p>
</div></a>
</div>
...
You could then use something like to toggle the appropriate content
$('.recentPost a').click(function(){
if($(this).attr('id')){
var x = /link-(.*)/.exec($(this).attr('id')); //figure out which content- div to display
$('.displayed').hide().removeClass('displayed'); //hide already displayed content
$('#content-' + x[1]).show().addClass('displayed'); //show content and mark it as displayed
return false;
}
});

There are a number of ways to achieve this. The most efficient would probably be a full ajax solution but that would require a Wordpress plugin and some advanced scripting.
The most straightforward solution would be to add a box for dynamic content, output the content for each post in a hidden DIV under it's permalink/image, then use javascript to move content from the hidden DIVs to the dynamic content box when a permalink is clicked. I've worked up some code at http://jsfiddle.net/HF9Pr/.

Try this:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
width: 203px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background: #c1e0fb;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
}
div.panel
{
height: 288px;
display: none;
border-top: 1px dashed #aaa;
}
p.flip
{
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
}
</style>
</head>
<body>
<div class="panel">
<b>sclughslru</b>
<br><br>
ertljhvij3p
<br><br>
<b>veuywihtp</b>
<br><br>
ghdjhrntnd
<br><br>
<b>ehv3rtv</b>
<br><br>
vt4k4kb76kb5
<br><br>
<b>edb3jrr3n54</b>
<br><br>
skcehgkheone
</div>
<p class="flip"><img src="https://dl-web.dropbox.com/get/Pictures/Other/up-down.jpg?w=f17ee285" style="width: 12px; height: 10px; margin-right: 10px;" />Information</p>
</body>