Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question mouseout / over not working in joomla template index page

    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.


    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

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    are u able to provide us with a link?
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hi pitbullmean thanks for the reply unfortunately site still not hosted, if you know any other way to do this please let me know.

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    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
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • Users who have thanked PitbullMean for this post:

    episode27 (08-08-2010)

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    oh thanks pitbull I'll give a try with css...

  • #6
    New Coder
    Join Date
    Aug 2010
    Location
    myeik
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 5 Posts
    i think you will use function

  • #7
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation

    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

  • #8
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    328
    Thanks
    9
    Thanked 49 Times in 48 Posts
    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:
    Code:
    <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>

  • Users who have thanked hdewantara for this post:

    episode27 (08-09-2010)

  • #9
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Resolved

    Quote Originally Posted by hdewantara View Post
    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:
    Code:
    <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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •