...

View Full Version : mouseout / over not working in joomla template index page



episode27
08-08-2010, 04:10 AM
Hi,

I need to add a mouseout and mouseover effected social buttons to my website and i have done that in normal html and works fine on all the browsers.

Then I paste the code in to template index.php but it not work any other browser except IE

here is the part of the code.



<div style="float:left;">
<a href="http://www.facebook.com" target="_blank"
onmouseout="document.fb.src='images/stories/demo/frontpage/social/fb_mover.png'"
onmouseover="document.fb.src='images/stories/demo/frontpage/social/fb.png'">

<img name="fb" src="images/stories/demo/frontpage/social/fb_mover.png" border="0"/>
</a>

</div>

please tell someone why it's not working also one more thing I didn't use any javascript for this and images linked from joomla main image folder.

thanks
:)

PitbullMean
08-08-2010, 05:01 AM
are u able to provide us with a link?

episode27
08-08-2010, 12:07 PM
hi pitbullmean thanks for the reply unfortunately site still not hosted, if you know any other way to do this please let me know.

PitbullMean
08-08-2010, 02:06 PM
Hey bud another way to do it is with CSS, heres a link with an example so u can try it for yourself. http://www.w3schools.com/css/css_image_sprites.asp

episode27
08-08-2010, 03:30 PM
oh thanks pitbull I'll give a try with css... :)

minkoko
08-08-2010, 04:39 PM
i think you will use function

episode27
08-08-2010, 06:48 PM
none of them are work I think I'm having a problem with my joomla template but I have tried everything using javascript, css, html nope no luck but html one witch I added on top was working perfectly in IE browsers and Opera other no luck I don't know what's the reason for this...

also I'm very sorry that I couldn't give a link to see the site because this is my company work either still this site is not hosted so I don't have any option unless sharing you the cording.

please advice me to do this in better way or if someone use mouse over effects previously great share how did you do that...

thanks alot :)

hdewantara
08-09-2010, 08:52 AM
Hi episode27,
Haven't used joomla before,
but could we somehow customize the <head> and <body> sections of joomla page?

If yes then let's see whether joomla engine understands one of these:


<head>
...
<meta content="text/html; charset=utf-8" http-equiv="content-type" />

<style type="text/css">
img{
display: block;
}
#fb3{
display: block;
width: 100px;
height: 100px;
background-image: url("images/stories/demo/frontpage/social/fb.png");
}
#fb3:hover{
background-image: url("images/stories/demo/frontpage/social/fb_mover.png");
}
</style>
...
</head>

<body>
....
<div style="float:left;">
<p>TRADITIONAL WAY:
<a href="http://www.facebook.com" target="_blank"
onmouseout="document.fb.src='images/stories/demo/frontpage/social/fb.png'"
onmouseover="document.fb.src='images/stories/demo/frontpage/social/fb_mover.png'">
<img id="fb" src="images/stories/demo/frontpage/social/fb.png" border="0"/>
</a>
</p>

<p>DOM WAY:
<a href="http://www.facebook.com" target="_blank"
onmouseout="document.getElementById('fb2').src='images/stories/demo/frontpage/social/fb.png'"
onmouseover="document.getElementById('fb2').src='images/stories/demo/frontpage/social/fb_mover.png'">
<img id="fb2" src="images/stories/demo/frontpage/social/fb.png" border="0"/>
</a>
</p>

<p>CSS WAY:
<a id="fb3" href="http://www.facebook.com" target="_blank"
</a>
</p>

</div>
...
</body>

episode27
08-09-2010, 03:33 PM
Hi episode27,
Haven't used joomla before,
but could we somehow customize the <head> and <body> sections of joomla page?

If yes then let's see whether joomla engine understands one of these:


<head>
...
<meta content="text/html; charset=utf-8" http-equiv="content-type" />

<style type="text/css">
img{
display: block;
}
#fb3{
display: block;
width: 100px;
height: 100px;
background-image: url("images/stories/demo/frontpage/social/fb.png");
}
#fb3:hover{
background-image: url("images/stories/demo/frontpage/social/fb_mover.png");
}
</style>
...
</head>

<body>
....
<div style="float:left;">
<p>TRADITIONAL WAY:
<a href="http://www.facebook.com" target="_blank"
onmouseout="document.fb.src='images/stories/demo/frontpage/social/fb.png'"
onmouseover="document.fb.src='images/stories/demo/frontpage/social/fb_mover.png'">
<img id="fb" src="images/stories/demo/frontpage/social/fb.png" border="0"/>
</a>
</p>

<p>DOM WAY:
<a href="http://www.facebook.com" target="_blank"
onmouseout="document.getElementById('fb2').src='images/stories/demo/frontpage/social/fb.png'"
onmouseover="document.getElementById('fb2').src='images/stories/demo/frontpage/social/fb_mover.png'">
<img id="fb2" src="images/stories/demo/frontpage/social/fb.png" border="0"/>
</a>
</p>

<p>CSS WAY:
<a id="fb3" href="http://www.facebook.com" target="_blank"
</a>
</p>

</div>
...
</body>



Hi hdewantar
many thanks for you kind attention and the code bro but I haven't tried this code yet hope it's works too, Ok the great new is I resolve the problem, the reason is the social button div layer and the site header layer conflict my social button layer was in back of the header div (header is 340px in to the left but the the div width 100%) so the mouse over or the links are not working (but the strange thing is this works on IE and opera perfectly) any way thanks for all of them who helped me and hope this would help you too



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum