Widget Mouseover coding issue Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    Widget Mouseover coding issue

    avatar
    Tobakado
    New Member


    Posts : 6
    Reputation : 1
    Language : English

    Solved Widget Mouseover coding issue

    Post by Tobakado June 22nd 2013, 8:29 am

    Code:
    <link href='http://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'><tr><td align="left"><center><img src="http://i683.photobucket.com/albums/vv194/galvesar/Ansgarstaff-1.jpg"><div style="height: 150px; border-top: solid 1px white; border-bottom: 1px dotted white; font-family: 'Patrick Hand SC', cursive; font-size:14px; color: white; text-transform:uppercase; text-align:justify; padding:5px; letter-spacing:1px; line-height:6px;"><script type="text/javascript">

    // copyright 1998 Idocs, Inc. http://www.idocs.com/tags/
    // Distribute this script freely, but please keep this
    // notice with the code.

    // var image information object
    var mloi=new Object();

    // set the image for swapping
    function setswap()
    {
    if (! document.images)return;
    var imgInfo=new Object();
    imgInfo.defaultImg = new Image();
    imgInfo.defaultImg.src = document.images[arguments[0]].src;
    imgInfo.opts = new Object();
    for (var i=1; i < arguments.length; i=i+2)
    {
    imgInfo.opts[arguments[i]]=new Image();
    imgInfo.opts[arguments[i]].src = arguments[i+1];
    }
    mloi[arguments[0]] = imgInfo;
    }

    // set up the link for swapping
    function swap(link,imgName,optName)
    {
    if (! document.images)return;
    if (! link.swapReady)
    {
    link.imgName = imgName;
    link.onmouseout = swapBack;
    link.swapReady = true;
    }
    document.images[imgName].src=mloi[imgName].opts[optName].src;
    }

    function swapBack()
    {document.images[this.imgName].src=mloi[this.imgName].defaultImg.src}

    //
    </script><div style="float:right; border:1px solid white; width:100px; height:100px;">
    <img src="http://i.imgur.com/nnbYhYd.jpg" name="showperson" height="100px" width="100px" align="right" border="1px dotted white">
    </div>
    <script type="text/javascript">

    setswap("showperson",
    'Galvesar', 'http://i.imgur.com/uo1MYeS.jpg',
    'Maylia', 'http://i.imgur.com/jlCzPUe.jpg',
    'Cecilia', 'http://i.imgur.com/ABi8OoX.jpg',
    'Yenomrah', 'http://i.imgur.com/8eALdDR.png',
    'The Black Knight', 'http://i.imgur.com/vMe2KCn.jpg'
    'Tobakado', 'http://i683.photobucket.com/albums/vv194/galvesar/tobystaff.jpg'
    'Al Barnhouse', 'http://i683.photobucket.com/albums/vv194/galvesar/Newsoul-1.jpg');
    //
    </script>
    <a href="http://rpreguh.rpg-boards.com/u1" onmouseover="swap(this,'showperson','Galvesar')" style="text-decoration: none">Galvesar</a>
    <br><br><br><br>

    <a href="http://rpreguh.rpg-boards.com/u5" onmouseover="swap(this,'showperson','Maylia')" style="text-decoration: none">Maylia</a>
    <br><br><br><br>

    <a href="http://rpreguh.rpg-boards.com/u7" onmouseover="swap(this,'showperson','Cecilia')" style="text-decoration: none">Cecilia</a>
    <br><br><br><br>

    <a href="http://rpreguh.rpg-boards.com/u6" onmouseover="swap(this,'showperson','Yenomrah')" style="text-decoration: none">Yenomrah</a>
    <br><br><br><br>

    <a href="http://rpreguh.rpg-boards.com/u8" onmouseover="swap(this,'showperson','The Black Knight')" style="text-decoration: none">TBK</a>
    <br><br><br><br>

    <a href="http://rpreguh.rpg-boards.com/u2" onmouseover="swap(this,'showperson','Tobakado')" style="text-decoration: none">Tobakado</a>
    <br><br><br><br>

    <a href="http://rpreguh.rpg-boards.com/u11" onmouseover="swap(this,'showperson','Al Barnhouse')" style="text-decoration: none">Al Barnhouse</a>
    <br></center></td></tr></div>

    For some odd reason this coding is botched up. When Usernames "Tobakado" and "Al Barnhouse" is excluded from the setswap showperson code, and the Ahref code is removed from the above named, it works fine without a hitch. The intent is, idealistically, is that you mouseover a name, a pic appears, and you can click the name to see the profile. Links work fine, just the mouseover image is permanently stuck as a black box. (Unless you remove "Tobakado" and "Al Barnhouse" and the related content to them completely from the coding.)

    If you wanna see the widget as it stands now, http://rpreguh.rpg-boards.com/ Bout halfway down the page on the left.

    Please and thanks are in order.
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: Widget Mouseover coding issue

    Post by SLGray June 22nd 2013, 6:48 pm

    It changes on every username except for Al Barnhouse.  I see the avatar for all except for Al Barnhouse.



    Widget Mouseover coding issue Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    Ultron's Vision
    Ultron's Vision
    Forumember


    Male Posts : 631
    Reputation : 45
    Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
    Location : Vienna, Austria

    Solved Re: Widget Mouseover coding issue

    Post by Ultron's Vision June 22nd 2013, 6:57 pm

    I would very much recommend using the jQuery framework to achieve these effects without much writing work. I can provide some script later on, when I'm on my PC (well, I cannot guarantee that it'll work, but I can try).
    avatar
    Tobakado
    New Member


    Posts : 6
    Reputation : 1
    Language : English

    Solved Re: Widget Mouseover coding issue

    Post by Tobakado June 23rd 2013, 5:08 am

    I ended up Figuring it out

    Code:
    'Yenomrah', 'http://i.imgur.com/8eALdDR.png',[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
    'The Black Knight', 'http://i.imgur.com/vMe2KCn.jpg'[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
    'Tobakado', 'http://i683.photobucket.com/albums/vv194/galvesar/tobystaff.jpg'[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
    'Al Barnhouse', 'http://i683.photobucket.com/albums/vv194/galvesar/Newsoul-1.jpg'

    I failed to put the comma at the end of the setswap showperson.
    Sorry for the inconvience if any.

    Lock it up consider it solved.
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: Widget Mouseover coding issue

    Post by SLGray June 23rd 2013, 5:36 am

    Thanks for posting the solution.

    Topic Solved & Locked



    Widget Mouseover coding issue Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.