5 Replies - 3392 Views - Last Post: 05 May 2009 - 07:53 AM

#1 JessH32  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 03-May 09

Adding mouseover to XHTML document changes the way the text and image

Post icon  Posted 03 May 2009 - 01:17 PM

All semester, I have been working on a single web page, modifying it repeatedly to add features (using CSS). This last assignment involves javascript, something we've just barely touched on. I can't seem to figure out where exactly the event handler should be placed. No matter where I move it, it alters the way the page displays.

In the right column, there are descriptions of 2 musicians, each includes a header, paragraph, and a thumbnail (that links to a larger image) on the far right side, next to the text.

I need to add this
<a href="#" onmouseover=
"alert( 'Concerts sell out quickly so act fast!');">Melanie Morris entertains with her melodic folk style.</a>

to this
<h3>January</h3>
<a href="melanie.jpg"><img src="melaniethumb.jpg" alt="Melanie Morris" width="100" height="97" align="right" border="0" hspace="150" /></a>
<p class="content">Melanie Morris entertains<br />
with her melodic folk style.<br />
Check out the podcast!<br />
CDs are now available.
</p>


The problem is, the book doesn't explain where to add it or have any examples of using onmouseover in this particuar way, so I've spent forever trying to figure it out. In some places, it makes the sentence shows up twice. In others, it completely moves the picture out of position and/or extends the "Melanie Morris entertains with her melodic folk style" all the way across the page (thus, pushing the picture down).

I initially had a very hard time making this page layout work (specifically, getting the images to show up in the right place) and it took many, many, many hours to figure it out. The professor consistently refuses to answer students questions, which seems a bit crazy to me, considering this is an introductory class.

The best I am getting from this is adding the mouseover immediately after the paragraph class and right before the Check out the podcast! line...removing from the paragraph the text that is repeated. It seems to look OK on IE, both full screen and when I make the screen smaller. Foxfire is displaying it less reliably though. As soon as I make the window smaller, the layout shifts.
I know that it's normal for different browsers to display differently.

I suppose my question is, does this code look correct? The professor doesn't carefully check it ...he just makes sure the page looks like it's supposed to and I would rather know that I'm doing it right (or not), and that I haven't just found a way to work around the rules so that it looks right, but is not, in fact, coded properly.

<h3>January</h3>
<a href="melanie.jpg"><img src="melaniethumb.jpg" alt="Melanie Morris" width="100" height="97" align="right"
border="0" hspace="150" /></a>
<p class="content">
<a href="#" onmouseover=
"alert( 'Concerts sell out quickly so act fast!');">Melanie Morris entertains with her melodic folk style.</a>
Check out the podcast!<br />
CDs are now available.

</p>



Is This A Good Question/Topic? 0
  • +

Replies To: Adding mouseover to XHTML document changes the way the text and image

#2 rharriso  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 45
  • Joined: 29-April 09

Re: Adding mouseover to XHTML document changes the way the text and image

Posted 03 May 2009 - 08:10 PM

Adding events to a tag is super gross, but it is affective. Generally the way it works is you just have the event name (onmouseover, onclick, whatever) as an attribute in the tag. Then what ever you have in the attribute will fire when that event is triggered. It doesn't matter what order that attributes are in.
Was This Post Helpful? 0
  • +
  • -

#3 xerxes333  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 31
  • View blog
  • Posts: 504
  • Joined: 05-July 07

Re: Adding mouseover to XHTML document changes the way the text and image

Posted 04 May 2009 - 11:42 AM

I would suggest wrapping the info in a div and using the <div> mouseover event rather than the <a>

<h3>January</h3>
<div onmouseover="alert('my message!');">
<a href="melanie.jpg"><img src="melaniethumb.jpg" alt="Melanie Morris" width="100" height="97" align="right" border="0" hspace="150" /></a>
<p class="content">Melanie Morris entertains<br />
with her melodic folk style.<br />
Check out the podcast!<br />
CDs are now available.
</p>
<div>

Was This Post Helpful? 0
  • +
  • -

#4 SoLi  Icon User is offline

  • andydust.com

Reputation: 41
  • View blog
  • Posts: 1,438
  • Joined: 27-January 02

Re: Adding mouseover to XHTML document changes the way the text and image

Posted 04 May 2009 - 02:11 PM

View Postxerxes333, on 4 May, 2009 - 06:42 PM, said:

I would suggest wrapping the info in a div and using the <div> mouseover event rather than the <a>



How comes?
Was This Post Helpful? 0
  • +
  • -

#5 crazyjugglerdrummer  Icon User is offline

  • GAME OVER. NERD WINS.
  • member icon

Reputation: 119
  • View blog
  • Posts: 690
  • Joined: 07-January 09

Re: Adding mouseover to XHTML document changes the way the text and image

Posted 04 May 2009 - 05:43 PM

At present you could have the mouseover event fire and display an alert when they mouseover the a tag, or the paragraph. Since the paragraph is contained in the a tag, if you add the alert to the a tag and mouse over the image, the alert box comes up. If you group both the a and p tags in a div, then you can fire the alert when they mouseover either one.

Divs are extremely commonly used when a certain group of things need to be styled/javascripted the same way. Applying X to the div will apply X to everything inside the dic.

Hope this helps!
Was This Post Helpful? 0
  • +
  • -

#6 xerxes333  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 31
  • View blog
  • Posts: 504
  • Joined: 05-July 07

Re: Adding mouseover to XHTML document changes the way the text and image

Posted 05 May 2009 - 07:53 AM

View PostSoLi, on 4 May, 2009 - 03:11 PM, said:

How comes?


Grouping and more control over the DOM. Just my $0.02 though (or 0.01321 for you British peeps ;) )
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1