473,758 Members | 8,297 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Image + Text swap question


Folks,
I'm still learning javascript - I've invested in a couple of books and
reading online as much as possible. I'm pretty sure what I am suggesting is
possible though I'm trying to weigh up the faults that might go with the
suggestion... all opinions welcome.

My question: I have a list of links that go to pages that have a similar
layout. Could I have a text swap, similar to what I've seen with image swaps
(or an image switch) whereby instead of loading a seperate page, text and
image is just replaced?

Other than not being accessable by non-javascript supported browsers, and
unlikely to be indexed by search engines, would I face any other
difficulties? For example, does an image/text swap have any browser
dependancy issues? If I know that all my clients will have javascript
switched on, I'm trying to figure out how much of my audience am I limiting
by having this 'feature' (my oldest clients that visit are IE5.5 and
Netscape 4 but these make up less than 2% of my entire visitors during the
past ten months).

Thanks...

--
A: Because it messes up the order in which people normally read text.
Q: Why is top-posting such a bad thing?
A: Top-posting.
Q: What is the most annoying thing on usenet?
Jul 20 '05 #1
3 6165
"Randell D." <yo************ **************@ yahoo.com> writes:
Folks,
I'm still learning javascript - I've invested in a couple of books and
reading online as much as possible. I'm pretty sure what I am suggesting is
possible though I'm trying to weigh up the faults that might go with the
suggestion... all opinions welcome.

My question: I have a list of links that go to pages that have a similar
layout. Could I have a text swap, similar to what I've seen with image swaps
(or an image switch) whereby instead of loading a seperate page, text and
image is just replaced?
Yes. I am not sure it is the best solution, but it is definitly technically
possible.

You have to decide on some design issues first, though.

Should all the text be loaded with the original page, or should the
new text be loaded on-demand when you click on a link? For images, it is
simple, they are always loaded when you need them, but text is not so
easily changed.

If you put the text in an iframe, you can change it by setting the src
property. It has all the problems of frames, though, and I wouldn't
recommend it for what you want.

If you fetch text on-demand, you need a way to fetch data from the
server without loading the page. Some browsers can do that with
special features like XML-Http-Request of IE and Mozilla
(<URL:http://jibbering.com/2002/4/httprequest.htm l>), but other browsers
need more work to fetch simple text.

If you load all the text with the original page, then switching the text
is only a matter of changing which text block is visible. Or, you can put
the text in Javascript and change the document content dynamically.
Other than not being accessable by non-javascript supported browsers, and
unlikely to be indexed by search engines, would I face any other
difficulties? For example, does an image/text swap have any browser
dependancy issues?
That depends on how you do it, and which browsers you target.

You should really decide the target browsers, and how the page should
degrade for other browsers, before anything else. It will limit what
approaches you can use.

Netscape 4 couldn't change the document structure dynmanically, but it
allowed you to change the contents of layers independently of the main
document. Other browsers that don't allow changes to the document structure
includes Opera 6, where your only choice is to load all the text at once
(or use iframes).

Text-swapping can be performed different ways:
- IE's innerHTML/innerText properties. While innerHTML is quite widely
implemented, it is non standard.
- W3C's DOM. Only supported in modern browsers, not Netscape 4 or IE 4.
If I know that all my clients will have javascript switched on,
How do you know?
Some statistics claim as many as 10% of people browsing without
Javascript.
I'm trying to figure out how much of my audience am I limiting by
having this 'feature' (my oldest clients that visit are IE5.5 and
Netscape 4 but these make up less than 2% of my entire visitors
during the past ten months).
As always, Netscape 4 is the worst offender. Not that you can blame it,
it was designed before the W3C DOM. You can blame people who still use
it and expect pages to work :).
A: Because it messes up the order in which people normally read text.
Q: Why is top-posting such a bad thing?
A: Top-posting.
Q: What is the most annoying thing on usenet?


My favorite is:
"Usenet isn't Jeopardy. The question before the answer, please."
:)

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2

"Lasse Reichstein Nielsen" <lr*@hotpop.com > wrote in message
news:8y******** **@hotpop.com.. .
"Randell D." <yo************ **************@ yahoo.com> writes:
Folks,
I'm still learning javascript - I've invested in a couple of books and
reading online as much as possible. I'm pretty sure what I am suggesting is possible though I'm trying to weigh up the faults that might go with the
suggestion... all opinions welcome.

My question: I have a list of links that go to pages that have a similar
layout. Could I have a text swap, similar to what I've seen with image swaps (or an image switch) whereby instead of loading a seperate page, text and image is just replaced?
Yes. I am not sure it is the best solution, but it is definitly

technically possible.

You have to decide on some design issues first, though.

Should all the text be loaded with the original page, or should the
new text be loaded on-demand when you click on a link? For images, it is
simple, they are always loaded when you need them, but text is not so
easily changed.

If you put the text in an iframe, you can change it by setting the src
property. It has all the problems of frames, though, and I wouldn't
recommend it for what you want.

If you fetch text on-demand, you need a way to fetch data from the
server without loading the page. Some browsers can do that with
special features like XML-Http-Request of IE and Mozilla
(<URL:http://jibbering.com/2002/4/httprequest.htm l>), but other browsers
need more work to fetch simple text.

If you load all the text with the original page, then switching the text
is only a matter of changing which text block is visible. Or, you can put
the text in Javascript and change the document content dynamically.
Other than not being accessable by non-javascript supported browsers, and unlikely to be indexed by search engines, would I face any other
difficulties? For example, does an image/text swap have any browser
dependancy issues?
That depends on how you do it, and which browsers you target.

You should really decide the target browsers, and how the page should
degrade for other browsers, before anything else. It will limit what
approaches you can use.

Netscape 4 couldn't change the document structure dynmanically, but it
allowed you to change the contents of layers independently of the main
document. Other browsers that don't allow changes to the document

structure includes Opera 6, where your only choice is to load all the text at once
(or use iframes).

Text-swapping can be performed different ways:
- IE's innerHTML/innerText properties. While innerHTML is quite widely
implemented, it is non standard.
- W3C's DOM. Only supported in modern browsers, not Netscape 4 or IE 4.
If I know that all my clients will have javascript switched on,


How do you know?
Some statistics claim as many as 10% of people browsing without
Javascript.
I'm trying to figure out how much of my audience am I limiting by
having this 'feature' (my oldest clients that visit are IE5.5 and
Netscape 4 but these make up less than 2% of my entire visitors
during the past ten months).


As always, Netscape 4 is the worst offender. Not that you can blame it,
it was designed before the W3C DOM. You can blame people who still use
it and expect pages to work :).
A: Because it messes up the order in which people normally read text.
Q: Why is top-posting such a bad thing?
A: Top-posting.
Q: What is the most annoying thing on usenet?


My favorite is:
"Usenet isn't Jeopardy. The question before the answer, please."
:)

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'


I'm curious - I knew someone with a similar name from Denmark - did you ever
work for HP?

Thanks for the prompt and detailed reply - I know my viewers have javascript
switched on because of a small clear.gif image that is downloaded
automatically, using javascript as a test. I can compare this with my
webalizer log files and things are almost the same (give or take under 2%) -
Fine for my purposes...

I do plan on offering a static 'non-javascript' version of my pages though
to cover my options....

The javascript portion includes "blurbs" - it relates to products and I
wasn't thinking of having the full text displayed - I was thinking of arrays
or objects (the latter I'm just begining to learn at the moment) to contain
the product name, the manufacturer and the first ten words (max 100chars)...
Each page refresh would change the order of the listing to give a rough
equality "top listing" thus not showing any single preference to one
manufacturer or product... I could have had it randomized via PHP but I
prefer a client-side engine...

And your Jeopardy signature - I like it and will remember it - someday it
will prove useful to me.... my girlfriend loves that show, regretably
because hearing the answer first really annoys me...

thanks for the help anyway...
Jul 20 '05 #3
"Randell D." <yo************ **************@ yahoo.com> writes:
I'm curious - I knew someone with a similar name from Denmark - did you ever
work for HP?
Nope, sorry (I wish!). According to Krak.dk, there are 60 people in
Denmark called "Reichstein ", and one other called "Lasse Reichstein",
but he lives in Copenhagen, while I'm from Århus :)
I know my viewers have javascript switched on because of a small
clear.gif image that is downloaded automatically, using javascript
as a test. I can compare this with my webalizer log files and things
are almost the same (give or take under 2%) - Fine for my
purposes...
That is probably a fairly accurate measure. If it is only on the front
page, it won't measure people going directly to sub pages. Still, 2%
is a fairly high number of people to annoy ...
I do plan on offering a static 'non-javascript' version of my pages though
to cover my options....
.... so this is a good idea.
The javascript portion includes "blurbs" - it relates to products and I
wasn't thinking of having the full text displayed - I was thinking of arrays
or objects (the latter I'm just begining to learn at the moment) to contain
the product name, the manufacturer and the first ten words (max 100chars)...
Each page refresh would change the order of the listing to give a rough
equality "top listing" thus not showing any single preference to one
manufacturer or product... I could have had it randomized via PHP but I
prefer a client-side engine...
Random shuffling of an array is fairly easy to do.
I don't see why you prefer clientside computation to serverside PHP.
All other things being equal, computing on the server is safer. Nobody
has PHP turned off :)

The description doesn't tell me whether you only load the first 100 chars
of the description, or load it all and only display the 100 char blurp.

If you only have the blurp loaded, you need to fetch the rest of the text
after the page has loaded. So, this gives you two options:
iframes (and an ilayer for NS4)
or
XMLHTTPRequest for IE and Mozilla (with some other option for other
modern browsers, and probably still an ilayer for NS4).

The most widely usable solution is iframes. It can even work without
Javascript in non-NS4 browsers.

....
<a href="productX. html" target="descrip tion" onclick="return switchTo('X')">
Product X is a fine thingie which is just what you want ...
</a>
....
<img id="imageToChan ge" src="prod1.png" >
<iframe name="descripti on" src="product1.h tml">
<ilayer name="NSdescrip tion" src="product1.h tml">
</ilayer>
</iframe>
....

For NS4, you will then change "document.layer s.NSdescription .src"
appropriately.
And your Jeopardy signature - I like it and will remember it
It really isn't mine. I picked it up from somebody in a Danish
newsgroup. :)
- someday it will prove useful to me.... my girlfriend loves that
show, regretably because hearing the answer first really annoys
me...


It's definitly just a gimmick. I can't remember the last time I saw
somebody forget to give the answer as a question.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
1861
by: Richard | last post by:
Considering the elemtary image swap routine in javascript: document.name.src="filename.gif" How would this be translated into PHP? So that if a visitor has js turned off, clicking on a thumbnail would show the larger image.
3
1766
by: Andy | last post by:
Can someone please help me with this problem? I don't know if this is possible in Java, so if it's not please point me in the right direction or to the right newsgroup! (I'm a newby to Java scripting). On a web page I have a webcam type image that updates every minute. I wish to conditionally replace this image with an apology image in the event that my upload fails for more than an hour. I guess what I want is some script that will...
2
1992
by: Cynthia | last post by:
I'm looking for javascript code that when I mouse over a menu item will display a picture elsewhere on the page. I know it exists, but the ones I've found so far just swap out the menu item in place. Even better would be one where I can swap the menu image and display an image elsewhere on the page. Many thanks!
2
1889
by: Matthew | last post by:
Hi all I'm looking for a solution that can be used in a calendar/gig guide scenario where each day is represented by a dot image. Now this dot must do the following 1. When the mouse goes over the dot image it swaps to the mouseover dot 2. When the mouse goes out of the dot image it restores back to the original img 3. When the img is clicked the dot image is swapped with another image
12
2617
by: Charlie King | last post by:
As I understand it, the use of FIR* to replace heading tags with images in visually enabled CSS browsers is now frowned upon on the basis that some screen readers will *nor* read back text that is marked up by CSS to be invisible or hidden. So... If I want to replace headings with images (because my client wants to use his specific font for headings where possible), what's the best way to do it?
6
3196
by: Karl | last post by:
Hi, Ok so on a given page I have 4 text links: see it in black see it in blue see it in red see it in green using the standard swap image behavior, clicking on one of the above links
7
8297
by: KiwiBrian | last post by:
On a web page I have a graphic for a Shopping Cart Submit button. It is within a form and working fine. I would like to perform an image swap to an identical graphic of a different colour when I hover over the button. Can anyone show me how to do this, or point me to an implementation. My present code for the submit button is:- <input type="image" name="submit" src="images/addtocart1.gif"> This changes the cursor to a hand, and operates...
3
5669
by: seamlyne | last post by:
The first method I ever used for multiple state buttons was to create a graphic for each button for each state: AboutUs_on, AbooutUs_over, AboutUs_out, etc. That works great when there are just a few buttons. I'm creating interfaces now with many more buttons than "just a few". I solved the maintenance problem by having generic button images, one for each state, and having them be background images for text containers, DIVs in this...
10
6777
by: cjparis | last post by:
Hello everyone. If anyone can give me a hand I would be gratefull Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE from Netscape. IE is ok but the Netscape browser including Firefox and Safari are not working now. Not sure why. The idea is that when you mouseover the arrows the gallery div moves to left and right. I have changed the script and now the image...
0
9506
marktang
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...
0
9317
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,...
0
10090
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9892
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,...
0
9758
tracyyun
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...
0
8759
agi2029
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...
1
7310
isladogs
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...
0
5190
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...
3
3423
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.