PDA

View Full Version : mouse over behaviour help!


Crumpy1
04-21-2012, 11:07 AM
Hi All,

I am looking to create a mouse-over behaviour for some of my images on my homepage. An example is here http://dogcollarsandclothes.com/ (please see the 4 smaller images under the main slider)

Can anybody please provide an insite on how to do this please.

Thanks

gentleone
04-21-2012, 02:41 PM
Check out this jQuery plugin:
http://buildinternet.com/project/mosaic/

With adjusting the options and a bit of the CSS you can get it exactly the same as on that dog site.

Crumpy1
04-21-2012, 05:43 PM
Check out this jQuery plugin:
http://buildinternet.com/project/mosaic/

With adjusting the options and a bit of the CSS you can get it exactly the same as on that dog site.

This is exactly what i needed, thanks so much!!

Can you please provide a few instructions on how to set-up this please.

Thanks

Crumpy1
04-21-2012, 06:59 PM
I have intergrated this the best that i can, from the demo page with the zip.

However i cannot get the text box to completly cover the image and i cannot change the link to standard text. I have tried creating an a:link etc for this id however it has not worked.

Here is my attempt http://hfcc.0catch.com/

Can anybody see where i have gone wrong?

Here is the html for the demo.


<head>
<title>Mosaic - Sliding Boxes and Captions jQuery Plugin</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />

<link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/></div>
</div>

<div class="clearfix"></div>
</div>

</body>
</html>


Thanks

Crumpy1
04-24-2012, 08:06 AM
I have added the following script to my header as this is suppost to fix my issue (according to Adobe)

<script type="text/javascript">


$(document).ready(function($){

$('.circle').mosaic({
opacity : 0.8 //Opacity for overlay (0-1)
});

$('.fade').mosaic();

$('.bar').mosaic({
animation : 'slide' //fade or slide
});

$('.bar2').mosaic({
animation : 'slide' //fade or slide
});

$('.bar3').mosaic({
animation : 'slide', //fade or slide
anchor_y : 'top' //Vertical anchor position
});

$('.cover').mosaic({
animation : 'slide', //fade or slide
hover_x : '400px' //Horizontal position on hover
});

$('.cover2').mosaic({
animation : 'slide', //fade or slide
anchor_y : 'top', //Vertical anchor position
hover_y : '80px' //Vertical position on hover
});

$('.cover3').mosaic({
animation : 'slide', //fade or slide
hover_x : '400px', //Horizontal position on hover
hover_y : '300px' //Vertical position on hover
});


});

</script>


However it has made no difference. Can anybody quickly look at my source code on my website here http://hfcc.0catch.com/ to see if i have put it in the correct place or to see where i have gone wrong.

Thanks

Corrosive
04-24-2012, 08:30 AM
It is working for me. Did you fix it?

Crumpy1
04-24-2012, 12:23 PM
It is working for me. Did you fix it?

Yes i have just this second fixed it. I wanted the text to strech right to the top of the image but to stop around 30px from the bottom so the header is still displayed so people know what is being advertised.

Thanks for your help, i could not have gotten here with out it.

Crumpy1
04-24-2012, 05:53 PM
Can you just tell me where in the code i change the pictures for each box as mine is still using the mosaic default and i am unsure on where to at teh img source

Code for 1 box is here

<div id="content">
<div class="mosaic-block bar">
<a href="http://buildinternet.com/project/mosaic" target="_blank" class="mosaic-overlay">
<div class="details">
<h4>Coats</h4><br />
<p>Dog coats are also used functionally. They can, however, also be used as fashion accessories. Dog coats worn inside and not in response to the elements are primarily for show only.</p>
</div>

gentleone
04-24-2012, 11:35 PM
Can you just tell me where in the code i change the pictures for each box as mine is still using the mosaic default and i am unsure on where to at teh img source

Code for 1 box is here

<div id="content">
<div class="mosaic-block bar">
<a href="http://buildinternet.com/project/mosaic" target="_blank" class="mosaic-overlay">
<div class="details">
<h4>Coats</h4><br />
<p>Dog coats are also used functionally. They can, however, also be used as fashion accessories. Dog coats worn inside and not in response to the elements are primarily for show only.</p>
</div>

It's the image wrapped in the div with the class 'mosaic-backdrop' which I don't see here in your code.

Crumpy1
05-08-2012, 10:54 AM
It's the image wrapped in the div with the class 'mosaic-backdrop' which I don't see here in your code.

I have found where the image is sourced from in the code. This is where the image is taken from
<div class="mosaic-block bar"> <a href="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg" target="_blank" class="mosaic-overlay">

what do i change this href tag to, to make it use an image from my root files?

The whole code looks like this...

<div id="content">
<div class="mosaic-block bar"> <a href="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg" target="_blank" class="mosaic-overlay">
<div class="details">
<h4>Collars</h4>
<br />
<p>A dog collar is a piece of material put around the neck of a dog. A collar may be used for control, identification, fashion, or other purposes. Identification tags and medical information are often placed on dog collars.[1] Collars are also useful for controlling a dog manually, as they provide a handle for grabbing. Collars are often used in conjunction with a leash, and a common alternative to a dog collar is a dog harness. Dog collars are the most common form of directing and teaching dogs.</p>
</div>

Thanks