Need help with JavaScript in Joomla

Discussion in 'Joomla' started by abrodski, Jul 6, 2010.

0
  1. #1
    I need help to use some Javascript feature that I found online somewhere. It's said:

    Changing images with MouseOver and MouseOut events

    This is probably the most common use of Javascript. There are countless ways to get this working,
    but I present one that I use frequently. This script like many of my other ones rely on numbered image files. Make images with names such as org0.jpg, org1.jpg and org2.jpg. These would be initially displayed.
    Get 3 more files named new1.jpg, new2.jpg and 3.jpg which would be the files displayed when the mouse is over the original images.




    <SCRIPT LANGUAGE = "JavaScript">
    <!--

    function new_img(no){
    document.images[no].src="new"+no+".jpg";
    }

    function org_img(no){
    document.images[no].src="org"+no+".jpg";
    }
    -->
    </SCRIPT>

    <BODY>
    <IMG SRC="org0.jpg" onMouseOver="new_img(0)" onMouseOut="org_img(0)">
    <IMG SRC="org1.jpg" onMouseOver="new_img(1)" onMouseOut="org_img(1)">
    <IMG SRC="org2.jpg" onMouseOver="new_img(2)" onMouseOut="org_img(2)">
    </BODY>

    Say, I have an article with an image and I want to use this trick. Is it possible and how I can do it?
    When I tried, what happened was that I saw the original image in a place where I placed Custom HTML module (with that JS in it) and when I hovered mouse on top of it-nothing happened.
    P.S. Is that a typo in this JS discription above. 'cos my logic tells me that it should be:
    org0.jpg, org1.jpg etc. and
    new0.jpg, new1.jpg etc
    and above it says org0.jpg and then it starts with new1.jpg
     
    abrodski, Jul 6, 2010 IP
  2. computeraholic

    computeraholic Member

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #2
    The scripts should be work.
    I think, maybe there is conflict with another JS library that you've used.
    Or may be you've CSS that prevents the javascript to do it because the CSS do that.
    Try to clear the CSS, or give me the URL of script that doesn't work, so I can check this things... :)
     
    computeraholic, Jul 7, 2010 IP
  3. abrodski

    abrodski Member

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    Thanks for your help!
    I think the problem is not with script. Or its not that it doesn't work.
    I think that I simply don't know HOW to implement it. So all I need is a simple step by step tutorial how to do what needs to be done in order to make it work.
    I'm not a coder, so just having a perfect code snippet won't do the trick with me.
    I also need a detailed instruction what to do with that code!
     
    abrodski, Jul 7, 2010 IP
  4. computeraholic

    computeraholic Member

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #4
    It will be better we talk about it through pm.
    You see, different templates, different way of implementing it as well.
    Please pm me with your template name details...
    I'll help you.. :)
     
    computeraholic, Jul 7, 2010 IP
  5. abrodski

    abrodski Member

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #5
    I found a solution...I placed this code into Custom HTML Joomla module and placed it in a copyright position of a template

    <script type="text/javascript">
    (function () {
    var el,
    id,
    imgSwap = { // Create the map of id to images
    img1: { oldImg: 'images/stories/org0.jpg', newImg: 'images/stories/new0.jpg' }
    };
    for (id in imgSwap) {
    if (imgSwap.hasOwnProperty(id)) {
    el = document.getElementById(id);
    if (el) {
    // Attach event handlers
    el.onmouseover = function (el, src) {
    return function () {
    el.src = src;
    };
    }(el, imgSwap[id].newImg);
    el.onmouseout = function (el, src) {
    return function () {
    el.src = src;
    };
    }(el, imgSwap[id].oldImg);
    }
    }
    }
    })();
    </script>

    And I opened the article with an original photo with noeditor and got access to the article's code. At the bottom there was a HTML tag img and it looked like this

    <img src="images/stories/org0.jpg" border="0" etc.....

    So I just added this id="img1"
    Then I got that
    <img src="images/stories/org0.jpg" id="img1" border="0" etc.....
    The trick works now, but the problem is a lag, a delay. You have to wait like 1-2 seconds until the new image loads. It would have been better if there was a way to load BOTH images when the page loads and then there won't be a noticable delay. Because now its like I have to load the new image from server. But after that, its very fast. Because probably Firefox caches it. It was worse in IE8. I read somewhere about CSS option which kinda resolves this issue... any ideas?
     
    abrodski, Jul 8, 2010 IP
  6. mediaguru

    mediaguru Peon

    Messages:
    219
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Your text editor was probably stripping the javascript. Script items often have to be inputted in raw code mode.
     
    mediaguru, Jul 11, 2010 IP
  7. mahesh2011

    mahesh2011 Peon

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    can hire developers from us,we have specialized in all the technology right from html to the latest flash..they can do it for you easily,please pm me..or contact through my email-id :mahesh342.adodis@gmail.com
    We serve solutions to your problems quickly and efficiently...We are basically strong in all cms available at the market..
     
    mahesh2011, Jul 15, 2010 IP