Mouseover Effects to Change a picture

For Joomla! 1.5 Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general
Forum rules
Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.
reedhinko
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Jun 21, 2012 2:50 pm

Re: Mouseover Effects to Change a picture

Post by reedhinko » Thu Jul 05, 2012 4:49 pm

Thanks Joel,

I cannot insert the id attribute in to the image tag. When I insert it in the html and update it, it does not take.

I definitely do need to get the pictures scaled down, but I have just been trying to get the mouseover function taken care of first.

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Thu Jul 05, 2012 4:57 pm

Try changing the id to something other than "main". That might be used somewhere else in the template. Try using something like "mainTopImage". Just remember to change it in the javascript.

reedhinko
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Jun 21, 2012 2:50 pm

Re: Mouseover Effects to Change a picture

Post by reedhinko » Thu Jul 05, 2012 5:21 pm

I still cannot get the id to stick in the image tag.

I am beginning to lose hope.

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Fri Jul 06, 2012 12:08 am

What version of Joomla are you using? Also, are you using an extra editor like JCE or is it just the built in joomla editor (tinyMCE)?

Something to try would be, use the show/hide code feature to display the raw html for the content item, make the id="main" addition and then save the item without clicking on the show/hide code link. The ID might be getting stripped out by the WYSIWYG editor.

???

reedhinko
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Jun 21, 2012 2:50 pm

Re: Mouseover Effects to Change a picture

Post by reedhinko » Fri Jul 06, 2012 4:39 pm

Joomla 1.5 and I am using the HTML external editor from the JCE..There is no special editor installed

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Fri Jul 06, 2012 11:25 pm

Not sure I can offer any more help. The id attribute in the image should be just fine. Not sure why it is stripping it out.

unleash_it
Joomla! Ace
Joomla! Ace
Posts: 1311
Joined: Wed Nov 05, 2008 11:28 pm

Re: Mouseover Effects to Change a picture

Post by unleash_it » Thu Jul 04, 2013 10:11 pm

hello dear all jdwires , hi reedhinko,

this is a terrific thread and i love all what is shown & discussed here. Well i am interested in what you discuss here: onmouseover-effects: i want to enlarge images that are shown in a DJ-Image-Slider.

question: is this doable & possible?

btw. see and example and how some guys did this - not within joomla... but perhaps we can adopt the techniques.




see: http://www.cssplay.co.uk/menu/magnify.html


Magnify an image - see the three pictures

1.flower 3.animal and 3. bird

that is so cool I could we do that in css

http://www.cssplay.co.uk/menu/magnify.html


btw: can we do this like so:

I was thinking the script would be simular to this:


<img src="image.jpg" onmouseover="width='200px'" onmouseout="width='100px'''>

If it is possible can the image load up in another layer so it doesnt resize any content on the page

That would be most greatful - again; can we adopt this in Joomla?!


thanks for sharin your ideas & thoughts
regards un-leash,
a big fan for ++ 11 years now: With Joomla you can easily create and extend your website: see the site, that offers you ideas & modules - extensions.joomla.org - it lists over 4000 extensions

User avatar
jdwires
Joomla! Intern
Joomla! Intern
Posts: 94
Joined: Wed Aug 12, 2009 2:22 am
Contact:

Re: Mouseover Effects to Change a picture

Post by jdwires » Mon Jul 15, 2013 7:12 pm

I guess there would be some way to "adopt" this into the Joomla framework, but really it is mostly just a CSS thing that you can add to your template stylesheet. Here is a quick example on codepen.io : http://www.codepen.io/jdwires/pen/skpby

Change the class names to something to better fit your needs. The basics are
  • Put thumbnail and large image onto page next to each other.
  • Wrap the two images in a link
  • Apply container style to link
  • Apply large style to large image
Below is the markup and CSS. See it in action on the codepen link above.

Code: Select all

<a class="mouseover-thumbnail-holder">
  <img src="http://placehold.it/150x150/ddf" alt="">
  <img class="large-thumbnail-style" src="http://placehold.it/250x250/ddf" alt="">

</a> 
<a class="mouseover-thumbnail-holder">
  <img src="http://placehold.it/150x150/fdd" alt="">  
  <img class="large-thumbnail-style" src="http://placehold.it/250x250/fdd" alt="">

</a> 
<a class="mouseover-thumbnail-holder">
  <img src="http://placehold.it/150x150/dfd" alt="">
  <img class="large-thumbnail-style" src="http://placehold.it/250x250/dfd" alt="">
</a>

Code: Select all

a.mouseover-thumbnail-holder {
  position:relative;
  display:block;
  float:left;
  margin-right:10px;
}
.large-thumbnail-style {
  display:block;
  border:10px solid #fff;
  box-shadow:0px 0px 5px #aaa;
}
a.mouseover-thumbnail-holder .large-thumbnail-style {
  position:absolute;
  top:0;
  left:-9999px;
  z-index:1;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}
a.mouseover-thumbnail-holder:hover .large-thumbnail-style {
  top:0;
  left:105%;
  z-index:1;
  opacity:1;
}

unleash_it
Joomla! Ace
Joomla! Ace
Posts: 1311
Joined: Wed Nov 05, 2008 11:28 pm

Re: Mouseover Effects to Change a picture

Post by unleash_it » Tue Jul 16, 2013 1:33 am

hello dear Joel,


many many thanks - i try to apply the above mentioned code to the page. [ to get the same effectes on the page http://www.maedchenhaus.org ] - see the image in the dj-image-gallery.

Code: Select all

<a class="mouseover-thumbnail-holder">
  <img src="http://placehold.it/150x150/ddf" alt="">
  <img class="large-thumbnail-style" src="http://placehold.it/250x250/ddf" alt="">

</a> 
<a class="mouseover-thumbnail-holder">
  <img src="http://placehold.it/150x150/fdd" alt="">  
  <img class="large-thumbnail-style" src="http://placehold.it/250x250/fdd" alt="">

</a> 
<a class="mouseover-thumbnail-holder">
  <img src="http://placehold.it/150x150/dfd" alt="">
  <img class="large-thumbnail-style" src="http://placehold.it/250x250/dfd" alt="">
</a>

Code: Select all

a.mouseover-thumbnail-holder {
  position:relative;
  display:block;
  float:left;
  margin-right:10px;
}
.large-thumbnail-style {
  display:block;
  border:10px solid #fff;
  box-shadow:0px 0px 5px #aaa;
}
a.mouseover-thumbnail-holder .large-thumbnail-style {
  position:absolute;
  top:0;
  left:-9999px;
  z-index:1;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}
a.mouseover-thumbnail-holder:hover .large-thumbnail-style {
  top:0;
  left:105%;
  z-index:1;
  opacity:1;
}
i will apply all and come back and report all findings

Again - many thanks!!

:)


update:

many thanks for the answer - and for encouraging me.

investigated it with FireBug and saw quite alot. ;-) Note FireBug is a tremendous tool that has got many many options - on a sidenote: i need to have some kind of manual.

i saw that have to tailor the layout.css

Code: Select all

<ul id="slider37" style="position: relative; width: 400px;">
<li style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1;">
<img alt="g_one1" src="/images/stories/girls_one/m_vignette_hans-on-experience_4545166211_.jpg">
<div class="slide-desc">
</li>
<li style="position: absolute; top: 0px; left: 0px; visibility: hidden; opacity: 0;">
<li style="position: absolute; top: 0px; left: 0px; visibility: hidden; opacity: 0;">
<img alt="gone_3" src="/images/stories/girls_one/m_vignette_gamergirls_4585918045_.jpg">
<div class="slide-desc">

and i certainly have to tweak a html-file in the template Ja_purity_II


well i dig deeper in the use of FireBug.

will come back and report all the findings.


regards leash
regards un-leash,
a big fan for ++ 11 years now: With Joomla you can easily create and extend your website: see the site, that offers you ideas & modules - extensions.joomla.org - it lists over 4000 extensions


Locked

Return to “Joomla! 1.5 Coding”