Current location: Hot Scripts Forums » General Web Coding » JavaScript » Mixing some HTML into some JavaScript


Mixing some HTML into some JavaScript

Reply
  #1 (permalink)  
Old 12-28-05, 11:30 PM
thatonedude thatonedude is offline
Newbie Coder
 
Join Date: Jun 2004
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Mixing some HTML into some JavaScript

I came across quite the problem last night and I was trying to work through it until I hit a JavaScript problem and, unfortunately, I know nothing of JavaScript.

You see, I found a JavaScript online that creates a popup "tooltip" above the mouse cursor. This one in particular allows an image to be inserted in the box which gave me an idea...removing the box around the image and text tooltip and adding an alpha-transparent PNG, thereby creating a pop-up alpha-transparent image that appears when you hover over a link.

In order to accomplish this in IE, though, I found a PHP script that allows transparent PNGs to be shown with full alpha-transparency in IEand this is where I encountered my problem...there's a certain bit of PHP code that has to be applied to an image tag <img> for IE to recognize and process the transparent image. The section of code in the tooltip script that calls the image is in Javascript, however.

So, I have to figure out how to incorporate this:
<img src="test.png" style="filter: progidXImageTransform.Microsoft.AlphaImageLoader (src='test.png', sizingMethod='scale');">
into this line of javascript:
('images/printexample1.png','text here.',"#DDECFF");
It's taken me a while to get here and now I'm stuck because, as I said, I know absolutely NOTHING of JavaScript. Hopefully after examining the scripts in question you might be able to figure out how I might get this to work. I appreciate any comments or suggestions. Just so you know, once the problem is resolved, I had planned on posting the problem and its' solution on my blog - just to help anybody else out in the future. In doing so, I would be more than happy to give any necessary credit (including a link or an image - your choice) to the man/woman who found the solution. I don't mean to mislead anyone, though, because I probably only get about 100 hits a month currently.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 12-29-05, 12:02 AM
TwoD TwoD is offline
Community VIP
 
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
You need to modify the code a bit since the image name is needed to be inserted in two places when using the filter.
I've made the neccessary modifications on these lines:
Code:
var midStr = '" border="0"></td></tr><tr><td valign="top">';
is changed to
Code:
var midStr = '" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'';
var midStr2 = '\', sizingMethod=\'scale\');" border="0"></td></tr><tr><td valign="top">';
to actually modify the dynamically created img tag.
Then we must also change the code so it outputs these strings and the filename between them.
From
Code:
var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
...
var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
To:
Code:
var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + messages[num][0] + midStr2 + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
...
var tip = startStr + messages[num][0] + midStr + messages[num][0] + midStr2 + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
We basically add the image name twice and put the correct strings inbetween.

Note: I haven't tested this, not even for syntax errors but it should work.
__________________
[W3Schools - learn all about the standards.] [QuirksMode - Browser Quirks] [MS's Online Reference Docs] [DOM in Gecko.]
Please pay attention to stickys, announcements and forum rules, thank you.
Please also remember Code Wrappers and [SOLVED] Marking, this helps everyone.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #3 (permalink)  
Old 12-30-05, 12:04 PM
thatonedude thatonedude is offline
Newbie Coder
 
Join Date: Jun 2004
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Well, at first that didn't seem to work but I realized that I hadn't placed your code correctly. Anyhoo, I found my mistake and the code started to work again but it still wasn't displaying correctly in IE. I'm sure that it can be accomplished (I can't see why it couldn't be) but it may require some heavy alteration (I don't know) to the Transparency-Fix-JavaScript.

I truly do appreciate your quick and thorough response to that post, though. I'll be sure to post back if and when I find the solution.

Thanks again!

Quote:
Originally Posted by TwoD
You need to modify the code a bit since the image name is needed to be inserted in two places when using the filter.
I've made the neccessary modifications on these lines:
Code:
 var midStr = '" border="0"></td></tr><tr><td valign="top">';
is changed to
Code:
 var midStr = '" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'';
 var midStr2 = '\', sizingMethod=\'scale\');" border="0"></td></tr><tr><td valign="top">';
to actually modify the dynamically created img tag.
Then we must also change the code so it outputs these strings and the filename between them.
From
Code:
 var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
 ...
 var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
To:
Code:
 var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + messages[num][0] + midStr2 + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
 ...
 var tip = startStr + messages[num][0] + midStr + messages[num][0] + midStr2 + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
We basically add the image name twice and put the correct strings inbetween.

Note: I haven't tested this, not even for syntax errors but it should work.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
html tutoral thefrtman HTML/XHTML/XML 5 04-27-09 11:25 AM
JavaScript inside HTML code Mondler JavaScript 1 11-30-05 09:32 PM
Block HTML and Javascript ObliviatorKK HTML/XHTML/XML 2 03-09-05 11:52 AM
HTML DOM, JavaScript, ASP, where to begin? fushichouryuuko ASP 1 01-01-05 05:18 PM
please help me turn the html code to javascript kicon JavaScript 5 12-16-04 09:54 AM


All times are GMT -5. The time now is 11:07 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.