Mouseover Effects to Change a picture
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Jun 21, 2012 2:50 pm
Re: Mouseover Effects to Change a picture
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.
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
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
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.
Joel Wires
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Jun 21, 2012 2:50 pm
Re: Mouseover Effects to Change a picture
I still cannot get the id to stick in the image tag.
I am beginning to lose hope.
I am beginning to lose hope.
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
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.
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.
Joel Wires
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Jun 21, 2012 2:50 pm
Re: Mouseover Effects to Change a picture
Joomla 1.5 and I am using the HTML external editor from the JCE..There is no special editor installed
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
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.
Joel Wires
-
- Joomla! Ace
- Posts: 1311
- Joined: Wed Nov 05, 2008 11:28 pm
Re: Mouseover Effects to Change a picture
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
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
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
- jdwires
- Joomla! Enthusiast
- Posts: 102
- Joined: Wed Aug 12, 2009 2:22 am
Re: Mouseover Effects to Change a picture
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
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
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;
}
Joel Wires
-
- Joomla! Ace
- Posts: 1311
- Joined: Wed Nov 05, 2008 11:28 pm
Re: Mouseover Effects to Change a picture
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.
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
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
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;
}
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">
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
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