Mouseover Effects to Change a picture

[reedhinko]

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.

[jdwires]

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]

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

I am beginning to lose hope.

[jdwires]

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 1.5 and I am using the HTML external editor from the JCE..There is no special editor installed

[jdwires]

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]

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

[jdwires]

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]

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