currently this is what I have: (in the dynamicly created <img/>)

<body onload = "
document.getElementById('html').value=
'...'+
'onmouseover=&quot;this.src = &rsquo;image.png&rsquo;&quot;'+
'...';
document.body.innerHTML = document.getElementById('html').value
">

but obviously &rsquo; is not right...
can someone help plox :/

EDIT:
getElementById('html') is a textarea
(innerHTML only updates properly with this method)

Recommended Answers

All 8 Replies

oh yea...
reason I'm using onload="" is because I need to get the screen width/height and apply it to the dynamic content...
it's very easy when doing it like this.

for more info

this html is used as a desktop BG as an interactive desktop.

I'm trying to fix a bug where it interferes with my desktop manager's behavior (causing it to not work) and messes up icon transparency, rendering the desktop BG color.
(this is a minor bug with explorer.exe)
^ my desktop manager interfaces with the MMB on the desktop to show and switch between processes on various desktops.

Member Avatar for LastMitch

I'm trying to fix a bug where it interferes with my desktop manager's behavior (causing it to not work) and messes up icon transparency, rendering the desktop BG color.(this is a minor bug with explorer.exe)my desktop manager interfaces with the MMB on the desktop to show and switch between processes on various desktops.

@Tcll

Are you still talking about javascript?

You are doing something on the client-side, so it's on the browser.

I'm not too sure what does it have to do with your desktop?

referring to the appearence of my desktop icons and that, no
(that's the bug with explorer.exe)

sorry I get off topic like that :P

what I'm trying to do here is make an area on my desktop that lightens as you position your pointer over it.
(done with translucent images over a BG image)

EDIT:
what it has to do with my desktop:
I'm using an htm as the desktop BG

Member Avatar for LastMitch

I'm using an htm as the desktop BG

Why are you using a htm file as a desktop bg? I am a bit confused what you are doing?

You know you can just used a software to create a bg image that has animation and implement it.

but an animated image isn't interactive, let alone it's only a single transpatency...

I'm using a total of 4 PNGs and 1 JPG for my desktop which are meant to respond to mouse interaction.

everything displays properly, but the interaction is what's messing up...

yes, I'm trying to make an interactive desktop.

for fun, I've set an SWF game as my desktop BG.
(through html of course)
that was quite a treat back then XDD

well... I've managed to get it somewhat working... heh
but it's not very friendly...
performance is out the window... heh

when the mouse is moved within the area (the first image [3])
it flickers as it redraws the images (the BG and the 2 overlays)
and also kills the last image overlay.

basically, I'm drawing 2 images over 2 images, overlaying one when onmouseover and removing it when onmouseout.

the image/area dimentions are 154(static)x1050(screenHeight)
however the raw image dimentions are 16x16...

I'm guessing it would be better to repeat these images rather than stretch them??

in any case... here's my code:

<html>
    <head><title></title>
    <script type="text/javascript">
        function SH(I, A) {
            if (A == 1) {
                document.getElementsByTagName('img')[I].style.display = ''
            } else {
                document.getElementsByTagName('img')[I].style.display = 'none'
            };
        };
    </script>
    </head>
    <body bgcolor="black" style=" margin:0;" onload="
        var W = screen.width; var H = screen.height;
        document.getElementById('html').value=
        '&lt;textarea rows=&quot;0&quot; cols=&quot;0&quot; id=&quot;Textarea1&quot; style=&quot;display: none;&quot;&gt;&lt;/textarea&gt;' +
        '&lt;img alt=&quot;&quot; src=&quot;BG2.jpg&quot; style=&quot;width: ' + W + '; height: ' + H + ';&quot; /&gt;' +

        '&lt;table style=&quot;width: ' + W + '; height: ' + H + '; margin-top: -' + H + ';&quot;&gt;' +
            '&lt;tr&gt;' +
                '&lt;td align=&quot;center&quot; valign=&quot;middle&quot;&gt;' +
                    '&lt;img alt=&quot;&quot; src=&quot;BG3.png&quot; /&gt;' +
                '&lt;/td&gt;' +
            '&lt;/tr&gt;' +
        '&lt;/table&gt;' +

        '&lt;table style=&quot;width: ' + W + '; height: ' + H + '; margin-top: -' + H + ';&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;' +
            '&lt;tr&gt;' +
                '&lt;td&gt;' +
                    '&lt;img ig=&quot;SkypeBG&quot; alt=&quot;&quot; src=&quot;BGT.png&quot; width=&quot;154&quot; height=&quot;' + H + '&quot;' +
                        'onmouseover=&quot;SH(3, 1);&quot;' +
                        'onmouseout=&quot;SH(3, 0);&quot;' +
                    '/&gt;' +
                    '&lt;img ig=&quot;SkypeBG&quot; alt=&quot;&quot; src=&quot;BGT.png&quot; width=&quot;154&quot; height=&quot;' + H + '&quot; style=&quot;margin-top: -' + H + '; margin-left: -154; display: none;&quot;/&gt;' +
                '&lt;/td&gt;' +
                '&lt;td&gt;' +
                '&lt;/td&gt;' +
            '&lt;/tr&gt;' +
        '&lt;/table&gt;';

        document.body.innerHTML = document.getElementById('html').value
        ">
        <textarea rows="0" cols="0" id="html" style="display: none;"></textarea>
    </body>

</html>

the SH() function takes the img index and the activator
(the activator is a bool which changes the display style of img[I])

well, performance is still down,
but I've fixed the flickering by moving onmouseover to the last image.
(the image shown when you move your mouse over the area)

any ideas on fixxing performance??

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.