Compounding MouseOver

12 New Member

I'm trying to create a design which mimics the Radiohead website in the action on this page, but the problem is that they use PHP for the effect and I have no idea about PHP. I'm very amateur: fairly confident with HTML and can scrape together codes with JavaScript with a lot of research and cursing, but for the life of me I can't see how to mouseover image or text A, get image or text B, mouseover B, get image or text C, and so on. I'm sure it can be done without needing to learn PHP but the text I am using so far doesn't recognise the second mouseover. It recognises the second a tag, certainly, as the text comes up as a link, but when I mouseover the second phrase it does nothing.

[HTML]<html>
<head>
<script language=javasc ript>

var first_text = '<a href=# onMouseOver=doc ument.write(sec ond_text);>1</a> ';
var second_text = first_text + '<a href=# onMouseOver=doc ument.write(thi rd_text);>2</a> ';
var third_text = first_text + second_text + '3';

</script>
</head>
<body>
<script>

document.write( first_text);

</script>

</body>
</html>[/HTML]

Can anybody help? I have a feeling that I've explained this badly...

Feb 6 '07 #1

Subscribe Reply

2748

acoder

16,027

Recognized Expert Moderator MVP

Welcome to The Scripts.

That cannot work. You are using a circular reference where second_text has not been defined and you are using it in first_text and second_text contains first_text which in turn contains second_text (and you end up in a spin!)

Instead define an array which contains all links/text and loop through them changing the mouseover on each mouseover or use a div/span and change the innerhtml.

Feb 6 '07 #2

Schannah

New Member

Alright. Remember that I know very little about this. Pretty much all of my JavaScript is cut and pasted together until it works, so starting from scratch is pretty much doomed to failure. In view of this, I have all of no chance of being able to use that successfully without a foolproof guide of how such things are meant to go. What I really need flatpacked for me is how you create a link which creates another link on mouseover which creates another link on mouseover ad infinitum. Like a mouseover menu, but with only one option on each level. I've been looking these up but they all seem to require utilities to be uploaded first, and I don't have the option of using external files. I handle my mouseover events in <a href> tags, which obviously you can't place within one another, so I have a grand total of no idea of how to extract this and put it into a JS script, and endless research into the matter has only left me more confused.

If anybody has the time to put together a few steps of The Idiot's Guide etc., I would be eternally grateful. I may marry you.

Feb 7 '07 #3

dorinbogdan

839

Recognized Expert Contributor

Try this orientative sample in IExplorer, and please let me know if it helps or not.
[HTML]<html>
<head>
<title>Untitl ed Document</title>
<script language="javas cript">
window.onload = function (){
var c1 = document.getEle mentById("c1");
c1.attachEvent( "onmouseove r", show);
}
function show(){
var sender = window.event.sr cElement;
var r = sender.parentEl ement;
if (r.cells.length >= 10) return;
var c = r.insertCell(-1);
c.id = "c" + r.cells.length;
c.innerHTML = "text" + r.cells.length;
c.attachEvent(" onmouseover",sh ow);
c.attachEvent(" onmouseout",res et);
r.appendChild(c );
sender.detachEv ent("onmouseove r",show);
sender.detachEv ent("onmouseout ",reset);
}
function reset(){
var c = window.event.sr cElement
var r = c.parentElement ;
var i = 0;
var len = r.cells.length;
for (i=len-1;i>=1;i--){
r.removeChild(r .cells(i));
}
c = document.getEle mentById("c1");
c.attachEvent(" onmouseover", show);
}
</script>
</head>

<body>
<table id="t1" border = "1">
<tr id="r1">
<td id="c1">text1</td>
</tr>

</table>
</body>
</html>[/HTML]

Feb 7 '07 #4

Schannah

New Member

It does... how do I replace the text1, text2 etc? Sorry.

Feb 7 '07 #5

acoder

16,027

Recognized Expert Moderator MVP

Replace with what? You can replace the text1 in the following line
[HTML]<td id="c1">text1</td>[/HTML]
to
[HTML]<td id="c1">whateve r you want</td>[/HTML]
The code makes use of the number after "text" and after "c" (c1, c2, etc.) You can adapt the code to your needs.

Feb 7 '07 #6

acoder

16,027

Recognized Expert Moderator MVP

BTW, dorinbogdan, thanks for sharing the code and welcome to The Scripts.

Feb 7 '07 #7

Schannah

New Member

Well, that's the thing... I can replace text1 with whatever I want, but I'd like each extra box to contain different words, and I don't know how to do that with the existing script.

Feb 8 '07 #8

acoder

16,027

Recognized Expert Moderator MVP

In function show(), look for the following line:

Expand|Select|Wrap|Line Numbers

c.innerHTML = "text" + r.cells.length;

and change that to your text. r.cells.length is the current number of cells, so it'll keep increasing till it gets to 9.

To show different text, declare an array, e.g.

Expand|Select|Wrap|Line Numbers

var myArray = {"test1", "my text", "and so on...", ... }

Then use r.cells.length to index the array, but remember that you cannot exceed the length of the array, otherwise you will get an error. To prevent that, change the line:

Expand|Select|Wrap|Line Numbers

if (r.cells.length >= 10) return;

Expand|Select|Wrap|Line Numbers

if (r.cells.length >= myArray.length) return;

to prevent exceeding the length of the array.

Hope that solves your problem. If not, feel free to post again.

Feb 8 '07 #9

dorinbogdan

839

Recognized Expert Contributor

I optimized the first sample.
You can set the desired texts in the strings[] array.
Let me know if need more features or enhancements.

[HTML]<html>
<head>
<title>Untitl ed Document</title>
<style>
.spacer {font-size:1px}
.custom {font-size:18px}
</style>
<script language="javas cript">

var strings = new Array();
strings[0] = "first text ...";
strings[1] = "second text ...";
strings[2] = "third text ...";
strings[3] = "fourth text ...";
strings[4] = "fifth text ...";
strings[5] = "sixth text ...";
strings[6] = "seventh text ...";
strings[7] = "eigth text ...";
strings[8] = "nineth text ...";
strings[9] = "10th / last.";
var max = strings.length-1;
window.onload = function(){
var r = document.getEle mentById("r1");
var c;
for (i=0;i<=max;i++ ){
c = r.insertCell(-1);
c.innerHTML = strings[i];
c.id = "c" + i;
c.style.display = "none";
c.attachEvent(" onmouseover",sh ow);
c.attachEvent(" onclick",reset) ;
c.className = "custom"
c.style.cursor = "pointer";
if (i==0) c.style.display = "block";
if (i==max) c.attachEvent(" onmouseout",res et);
}
r = document.getEle mentById("topro w");
r.cells(0).colS pan = max+1;
r = document.getEle mentById("botto mrow");
r.cells(0).colS pan = max+1;

}
function show(){
var sender = window.event.sr cElement;
if (sender.id == "c" + max) {
sender.style.co lor = "red";
return;
}
sender.style.co lor = "blue";
var nextid = (1 + parseInt(sender .id.substr(1))) ;
var nextCell = document.getEle mentById("c"+ nextid);
nextCell.style. display = "block";
}
function reset(){
var r = document.getEle mentById("r1");
if (r.cells==null) return;
var i = 0;
for (i=max;i>=1;i--){
r.cells(i).styl e.display = "none";
}
r.cells(0).styl e.color = "black";
}
</script>
</head>

<body>
<table id="t1" height="50px" border = "1" cellspacing="0" cellpadding="1" >
<tr id="toprow" class="spacer" height="1" onmouseover="re set()"><td>&nbs p;</td></tr>
<tr height="50px" id="r1">

</tr>
<tr id="bottomrow" class="spacer" height="1" onmouseover="re set()"><td>&nbs p;</td></tr>

</table>

</body>
</html>[/HTML]

Feb 8 '07 #10

Similar topics

2334

Need to know if this is even possible (mouseover mayhem, long)

by: J. Makela | last post by:

Hallo. This should be a pretty entertaining question for you *real* javascript writers.. I, being the lowly photoshop guy at an ad agency made the mistake of actually saying "HTML" in a conversation once.. and now I have been tasked with building a big website with LOTS of fancy javascripting. Image rollovers mostly. Only problem is that I don't really know how to do it. Of course, that's of no consequence so I have to do it anyway....

Javascript

3345

Optimizing code for span mouseover invocation.

by: Alex | last post by:

On my page I have a lot string like this: <span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span> <span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span> <span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc3</span> <span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc4</span> How can I optimize it? Is it possible to move this definition what to do to style/css or some other common...

Javascript

19496

HTML image map mouseover help

by: Annette Acquaire | last post by:

I have and image map with a dozen hotspot links on it that I'm trying to get to open a new image over existing one on mouseover of each COORD. The only thing I was able to do was swap image on mouseover entire image, I want it on each hotspot only, so an image pertaining to each link shows up. I have done it in JavaScript, but the website I'm using doesn't use JavaScript. Y'all are obviously light-years more knowledgeable then me on html...

HTML / CSS

1957

mouseover only works correctly on second mouseover.

by: dave345 | last post by:

This javascript issue is in an app using C# / .Net 2.0 running on XP. First post, please mention if I mess up any conventions of this forum. I’ve got a mouseover event that only works properly the second time it fires if the page has been scrolled a lot. The mouseover displays an image in a div that is placed near the mouse cursor. When the rollover occurs near the bottom of the page, the coordinates are altered so that the entire image is...

Javascript

8367

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8279

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8703

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8467

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8589

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7302

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6160

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

4145

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

2703

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp