The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Widget Mouseover coding issue

View previous topic View next topic Go down

Solved Widget Mouseover coding issue

Post by Tobakado on 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.

Tobakado
New Member

Posts : 6
Reputation : 1
Language : English

Back to top Go down

Solved Re: Widget Mouseover coding issue

Post by SLGray on 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.


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


SLGray
Administrator
Administrator

Male Posts : 36705
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Widget Mouseover coding issue

Post by Ultron's Vision on 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).

Ultron's Vision
Forumember

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

http://duelacademy.net

Back to top Go down

Solved Re: Widget Mouseover coding issue

Post by Tobakado on 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.

Tobakado
New Member

Posts : 6
Reputation : 1
Language : English

Back to top Go down

Solved Re: Widget Mouseover coding issue

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

Thanks for posting the solution.

Topic Solved & Locked


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


SLGray
Administrator
Administrator

Male Posts : 36705
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum