473,809 Members | 2,891 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

css image swap

PJ
I'm trying to duplicate a particular image swap effect shown here:
http://css.maxdesign.com.au/listamatic/horizontal18.htm

However, I'm confused as to how the padding values are calculated and I was
hoping someone could provide a little insight. Are the padding values
contingent upon the length and size of the text? Is there a way to achieve
this effect w/out using padding values? I attempted to set display: block
on the a elements, but that caused the list items to stack on top of each
other, despite the fact that their display style is set to inline.

TIA~
PJ
Jul 20 '05 #1
3 5685
PJ wrote:
I'm trying to duplicate a particular image swap effect shown here:
http://css.maxdesign.com.au/listamatic/horizontal18.htm

However, I'm confused as to how the padding values are calculated
Distance between edge of the image and the area of the image that the text
should appear in.
I attempted to set display: block on the a elements, but that caused the
list items to stack on top of each other, despite the fact that their
display style is set to inline.


Of course - a block has a new line before and after it. It busts the line.
--
David Dorward <http://dorward.me.uk/>
Jul 20 '05 #2
PJ
> > However, I'm confused as to how the padding values are calculated

Distance between edge of the image and the area of the image that the text
should appear in.


If this is the case, then how do I get one style to work for text of varying
lengths?
Jul 20 '05 #3
PJ wrote:
However, I'm confused as to how the padding values are calculated
Distance between edge of the image and the area of the image that the
text should appear in.
If this is the case, then how do I get one style to work for text of
varying lengths?


The padding isn't related to the size of the text, the size contraints are
provided by the image. If you want to work around that, then you have to
roll into the land of nested divs -
http://dorward.me.uk/tmp/StarSlayer/background.htm (and it might be ...
tricky to persuade that to work with the rollovers.)

--
David Dorward <http://dorward.me.uk/>
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
6171
by: Randell D. | last post by:
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)...
1
2080
by: John | last post by:
I am rotating images of different dimensions. My problem is that when a new image is displayed in a new position which had an image of a different dimension, the old image is first stretched to the dimension of the new image, before the new image is loaded. How can I stop this stretching behavior? See the banner images on the right at http://finialworld.com thank you John
2
1560
by: Frank Bishop | last post by:
I have been trying to do image swaps and my second image does not show up, it just goes to a blank image on the mouseover. I have Windows XP SP2 and it prompts me to allow blocked content when the page loads and then I do allow. But the swap still does not show up, just the first image. Also, is there a more advanced example that has multiple swap buttons in a menu (maybe in an array)? Help appreciated. <code> <head> <title>Cool...
2
1891
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
2
4494
by: broms10 | last post by:
I need help. I have a little button that says "next" below a big image, let´s call it "image1", when I press the button I want to swap the big image to "image2". And then if I press it again I want it to swap to "image3" and the next time to "image4" and so on. I´m not so good at javascripts but I found a script that can make the button swap "image1" to "image2" when I click it, but the problem comes when I want the same button to swap...
12
2624
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?
3
5673
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...
4
11511
by: lemat | last post by:
Hi, I use a radio button form in which users can select a color by clicking on a image. I would like this image to change to another one when it's chosen. (image with a "Chosen" Stamp in the middle) Of course I like it to be restored if hte user select another color. I've tried to add behaviour to the image (swap on click) and on the button (onchange swap restore) but it doesn't work (hte image id swapped and restored almost instantly).
3
2024
by: PEJO | last post by:
I'm not much of a JS programmer so I used the the standard Macromedia swap image function for a disjointed rollover..which works fine.. no problem swapping the image with that code.... but when I add the following to the onMouseOver to the thumbnail: onMouseOver="Product_Link.href='http://glasstoilets.com/catalog/tank1-p-28.html'; and this to the full size...
0
9721
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
9600
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
10114
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
9198
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
7651
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
6880
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5548
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...
2
3860
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3011
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.