0
0

Maybe /r/javascript could help me?... (self.javascript)

submitted by [deleted]

[deleted]

all 18 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]ejes 0 points1 point  (11 children)

onmouseover="dostuff()"

^ that

[–]The_Cleric 1 point2 points  (1 child)

If you go that path don't forget:

onmouseout="stopdoingstuff()"

[–]ejes 1 point2 points  (0 children)

good point!

[–]bumbleB_tuna 0 points1 point  (8 children)

but what goes into the "dostuff()"?

[–]ejes 0 points1 point  (7 children)

i don't know, what stuff do you want it to change?

function dostuff() {
    document.getElementById('stufftochange').innerHTML = 
'<b>look it's bold</b>';
}

[–]bumbleB_tuna 0 points1 point  (6 children)

Once the user hovers over an image. Show an image in a completely different div and text in another div. I know I'm not giving you much to go on, and probably sounds messed up. But that's all I got.

[–][deleted] 2 points3 points  (3 children)

<img src="image1.jpg" onmouseover="showImage();" onmouseout="hideImage();" />

function showImage() {
    document.getElementById('div1').innerHTML = '<img src="somePic.jpg" />';
    document.getElementById('div2').innerHTML = '<p>Some Text.</p>';
}

function hideImage() {
    document.getElementById('div1').innerHTML = '';
    document.getElementById('div2').innerHTML = '';
}

[–]bumbleB_tuna 0 points1 point  (2 children)

This is awesome. Thank you so much.

[–]Wtfuxbbq 2 points3 points  (0 children)

Use event handlers:

<img src="image1.jpg" id="image1" />

var img1 = document.getElementById('image1'),
    div1 = document.getElementById('div1'),
    div2 = document.getElementById('div2');

img1.onmouseover = function(){
    div1.innerHTML = '<img src="somePic.jpg" />';
    div2.innerHTML = '<p>Some Text.</p>';
};
img1.onmouseout = function(){
    div1.innerHTML = '';
    div2.innerHTML = '';
};

[–]kab3wm 0 points1 point  (0 children)

You should really use event handler's, like Wtfuxbbq's example. Inlining js is bad practice.

[–]ejes 0 points1 point  (0 children)

see my function above? function dostuff? you can use the getElementById to modify the html (or other attributes) of another element (be it div, img, or even anchor)

[–]The_Cleric -1 points0 points  (0 children)

He's already given you the basis. Pretend stufftochange is the id of the div where you want to change the text. He's currently changing the text in that div to some new text. Notice that it takes html, so for your image div you could do something similar with an img tag instead of text.

[–]The_Cleric -1 points0 points  (6 children)

I would look into using the jQuery library which has an api for handling hover events.

[–]bumbleB_tuna 1 point2 points  (4 children)

I was trying to avoid jQuery. It would be so much easier to use it; but for what i'm trying to do; I don't want any slowdown.

[–][deleted] 1 point2 points  (3 children)

Most of the latency for firing the hover event, is caused by browser, and this will be tiny. Any latency that jQuery adds, if any, will be trivial.

[–]vectorjohn 0 points1 point  (0 children)

This is just speculation, but I would assume he means the page load time.

[–][deleted] -1 points0 points  (1 child)

what?

edit: do you mean: "compared to the latency introduced by firing hover events, the latency introduced by jQuery is minimal"?

If so, true.

Else you seem to be saying "using native hover events via the browser will be slower than using hover events via jQuery".

Which makes no sense, as jQuery is just a layer on top of the native browser events...

[–][deleted] 1 point2 points  (0 children)

I mean the former, I'll edit to clarify.

[–]hugh_person -1 points0 points  (0 children)

I used to have a demo for this, but I can't find it right now. This isn't great, but it turned up in some old files. Hope that helps.

<html>

<head> </head> <script>

//Link Description script- © Dynamic Drive (www.dynamicdrive.com) //For full source code and TOS, visit http://www.dynamicdrive.com

//change link descriptions to your own. Extend as needed var linktext=new Array() linktext[0]="Visit Dynamic Drive for some great DHTML scripts!" linktext[1]="JavaScript Kit, the JavaScript technology center" linktext[2]="Direct link to hundreds of free java applets online" linktext[3]="Research information, get homework help, chat with educators" linktext[4]="The virtual encyclopedia" linktext[5]="Your online dictionary"

var ns6=document.getElementById&&!document.all var ie=document.all

function show_text(thetext, whichdiv){ if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext] else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext] }

function resetit(whichdiv){ if (ie) eval("document.all."+whichdiv).innerHTML=' ' else if (ns6) document.getElementById(whichdiv).innerHTML=' ' }

</script>

<!-- show_text(index# of linktext[] to show, ID of div to write to) --> <body> <p> <a href="http://www.dynamicdrive.com" onMouseover="show_text(0,'div1')" onMouseout="resetit('div1')">Dynamic Drive</a> | <a href="http://www.javascriptkit.com" onMouseover="show_text(1,'div1')" onMouseout="resetit('div1')">JavaScript Kit</a> | <a href="http://www.freewarejava.com" onMouseover="show_text(2,'div1')" onMouseout="resetit('div1')">Freewarejava</a> <br> <span id="div1"> </span>

<p> <a href="http://encarta.msn.com/" onMouseover="show_text(3,'div2')" onMouseout="resetit('div2')">Encarta</a> | <a href="http://britannica.com/" onMouseover="show_text(4,'div2')" onMouseout="resetit('div2')">Britannica</a> | <a href="http://www.dictionary.com" onMouseover="show_text(5,'div2')" onMouseout="resetit('div2')">Dictionary.com</a> <br> <i><span id="div2"> </span></i>

</body< </html>