Use onmouseover-JS for article images.

newnoise · 2011-11-13 14:32:57

Hi,

i have a custom_article list in which I would like to use JS onmouseover-effect to display name of the release (see: www.fjellsmug.com).

How can I achieve this? I tried to add the onmouseover-picture as custom-field, and I can read that, but I cant use the onmouseover in the article_image tag …

Any ideas?

Thanks. noise

Dragondz · 2011-11-13 15:05:25

You can do like this for ex (if image is in article_image field):

<txp:article_custom>
<txp:title />
<txp:article_image class="myimg" />
</txp:article_custom>

and in head use jquery + code like this:

$('.myimg').hide();
$('.myimg').mouseover(function() {
  $(this).find('.myimg').show();
});
$('.myimg').mouseleave(function() {
    $(this).find(".myimg").hide();
});

NB: not tested but should work

newnoise · 2011-11-13 15:11:50

Hi. Thanks.

But it is a list of articles of unknown lenth. So I cant use one CSS class, because I wouldnt be able to load the right picture …

jakob · 2011-11-13 16:07:02

Where do you want the title to show?

If you just want the title to appear when you roll over the image, you can use css for that and don’t need js. I see you’re using HTML5 markup so you could place your article image in a figure container and your cd title in the figcaption, then simply use css to show the figcaption on figure:hover e.g. something like this (untested):

<txp:article_custom section="releases" limit="12">
  <a href="<txp:permlink />" title="<txp:title />">
    <txp:images id='<txp:custom_field name="article_image" />'>
      <figure class="album_cover">
        <txp:thumbnail />
        <figcaption><txp:title /></figcaption>
      </figure>
    </txp:images>
  </a>
</txp:article_custom>

That should give a list of the 12 most recent releases as captioned figures that link to the respective release (HTML5 syntax). In this case your cd releases are stored as articles in the section “releases”. Put the image ID# in the article image field, and the caption is drawn from the title of the release. If you would prefer to use the image caption (as entered in the image tab, use <figcaption><txp:image_info type="caption" /></figcaption> instead. Change the rest according to your requirements.

Your basic css could be:

/* figure container, grid formation, set position to relative as reference for positioned contained items */
figure.album_cover {
  position:relative;
  float: left;
  margin: 20px 20px 0 0;
  overflow: auto;
}
/* figcaption positioned bottom left with respect to container
    white text on black bg, semi-transparent, hidden in normal state */
figcaption { 
  position:absolute;
  bottom:0; 
  left:0; 
  display:none;
  background: #000;
  color: #fff;
  opacity: 0.8;
}
/* show figcaption on hover over figure */
figure.album_cover:hover figcaption {
  display:block;
}

Alternatively, if you want a tooltip to show, you might want to try one of the numerous jquery tooltip plugins (for example) that create a tooltip based on what you have in the title attribute.

Dragondz · 2011-11-13 16:15:58

hi that s why i use

$(this).find('.myimg').show();

try googling jquery to see some examples

jakob · 2011-11-13 16:30:21

Dragondz, your approach does ‘the opposite’, i.e. it shows the image if your roll over the title … or at least that is what I think you meant to do. As it stands, you’ve hidden all the images so they won’t be there to roll over. Stick the title and image in a container of some sort and attach your mouseover event to the container; that will then be the $(this) to which the image relates. But in essence simple show/hide can be done with css too, you only really need the js for older browsers that can’t hover elements that aren’t anchors.

Dragondz · 2011-11-13 17:00:29

Sorry that s true the code should be:

<txp:article_custom>
<h4 class="hoverme"><txp:title /></h4>
<txp:article_image class="myimg" />
</txp:article_custom>

$('.myimg').hide();
$('.hoverme').mouseover(function() {
  $(this).find('.myimg').show();
});
$('.hoverme').mouseleave(function() {
    $(this).find(".myimg").hide();
});

I try to give an idea where to go, but your approach seems better using only css.

Cheers

Last edited by Dragondz (2011-11-13 17:01:00)

jakob · 2011-11-13 17:57:27

That’s nearer but still not sure if that works. Either you need $(this).next(".myimg").hide(); instead of find() (I don’t think that find() selects siblings, only descendants), or you stick with find() but enclose your h4 (this time without class) and image in a div with class=“hoverme”.

Dragondz · 2011-11-14 08:56:38

Hi

I cant say if it will work or not until a test can be made,

My javascript code never works in first attempt i allways should tune it to make it work. but thanks to point the errors above that can surely help someone trying the code.

jakob · 2011-11-14 09:07:44

Sure, same here. BTW: I find these alternative jQuery docs much easier to use than the original.

Dragondz · 2011-11-14 09:51:01

Thanks for sharing jakob

newnoise · 2011-11-14 13:11:12

thanks a lot jakob. i wasnt so familiar with the new html5 capabilities of figures and their captions. I will read about the new stuff in html5 right now ;)

thanks! (if you want to see it, its already online …)

Textpattern CMS

Textpattern CMS support forum

#1 2011-11-13 14:32:57

Use onmouseover-JS for article images.

#2 2011-11-13 15:05:25

Re: Use onmouseover-JS for article images.

#3 2011-11-13 15:11:50

Re: Use onmouseover-JS for article images.

#4 2011-11-13 16:07:02

Re: Use onmouseover-JS for article images.

#5 2011-11-13 16:15:58

Re: Use onmouseover-JS for article images.

#6 2011-11-13 16:30:21

Re: Use onmouseover-JS for article images.

#7 2011-11-13 17:00:29

Re: Use onmouseover-JS for article images.

#8 2011-11-13 17:57:27

Re: Use onmouseover-JS for article images.

#9 2011-11-14 08:56:38

Re: Use onmouseover-JS for article images.

#10 2011-11-14 09:07:44

Re: Use onmouseover-JS for article images.

#11 2011-11-14 09:51:01

Re: Use onmouseover-JS for article images.

#12 2011-11-14 13:11:12

Re: Use onmouseover-JS for article images.

Board footer