Re: [WSG] How to make diagonal lines change color?

[Andrew Freedman]

Sounds more like a web design issue rather than a web standards issue.  
Maybe it should be taken to a web design list.


Try - 
http://tech.groups.yahoo.com/group/adobe-dreamweaver/?v=1&t=directory&ch=web&pub=groups&sec=dir&slk=1


Andrew.


Laert Jansen provided the following information on 11/04/2008 8:54 AM:

Hello everyone.

Well there´s something I want to do but I have no idea if it´s 
possible to be done and how would I do this.
My website (www.laertjansen.com ) has some 
two color diagonal lines as a bg.

What I want to do is: On the mouse over color X it becomes color Y
   On the mouse over color Y it becomes 
color X

Is it possible to be done?
Thanks a lot for any help
--
Laert Jansen
www.laertjansen.com 





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] How to make diagonal lines change color?

[michael.brockington]

That sounds very complex to achieve, if it is possible:
As things stand, the lines you are talking about don't actually exist, they are 
an artefact of the tiled bb image you are using (nb, the effect was too subtle 
for me to see on the first machine I viewed your site on) - to do what you 
describe you will first of all have to make those lines tangible somehow, or at 
the very least a single diagonal line that could be positioned to give you the 
visual effect you describe.
Secondly you have to detect the transitions between one line and the next, 
which require either a tangible block (not easy for a diagonal), an image map, 
or some careful maths tied to some JavaScript.
 
Out of all that, all I can see that would be possible would be to set up two 
approximately full-page-size layers above your background, but beneath all of 
your content. One layer with a single grey diagonal line, and the other with a 
single black diagonal line. 
Then, track the position of the mouse, and if it is over any of the content, 
hide both floating layers.
If the mouse is over the calculated position of a grey line, then show the 
black-line-layer, with the position adjusted so that the overlay line 
co-incides with the bg-line.
When the mouse moves over to a black line, hide the black-line-layer, make the 
grey-line-layer visible, and position appropriately.
 
That sounds like a lot of work to me, maybe too much code to even work, but 
does sound like a fun effect, if the colours had a fraction more contrast.
 
Everyone: feel free to chip in if you think I have missed anything,
Regards,
Mike




From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Laert 
Jansen
Sent: Friday, April 11, 2008 2:25 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] How to make diagonal lines change color?


Hey Mike,  there´s a black line and a grey line when the mouse 
passes over one grey line it becomes blackwhen the mouse passes 
over one black line it becomes grey..only the line that the mouse 
passes over would change its color..not the whole bg or the other lines


On Fri, Apr 11, 2008 at 4:57 AM, <[EMAIL PROTECTED]> wrote:


Do I understand this right: you want the background to change, 
as the mouse passes over one of these diagonal lines - or just when the user 
mouses over any part of the background?
 
Mike


 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] How to make diagonal lines change color?

[Laert Jansen]

Hey Mike,  there´s a black line and a grey line when the mouse
passes over one grey line it becomes blackwhen the mouse passes
over one black line it becomes grey..only the line that the
mouse passes over would change its color..not the whole bg or the other
lines

On Fri, Apr 11, 2008 at 4:57 AM, <[EMAIL PROTECTED]> wrote:

>  Do I understand this right: you want the background to change, as the
> mouse passes over one of these diagonal lines - or just when the user mouses
> over any part of the background?
>
> Mike
>
>  --
> *From:* [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] *On
> Behalf Of *Laert Jansen
> *Sent:* Thursday, April 10, 2008 11:55 PM
> *To:* wsg@webstandardsgroup.org
> *Subject:* [WSG] How to make diagonal lines change color?
>
> Hello everyone.
>
> Well there´s something I want to do but I have no idea if it´s possible to
> be done and how would I do this.
>
> My website (www.laertjansen.com) has some two color diagonal lines as a
> bg.
>
> What I want to do is: On the mouse over color X it becomes color Y
>On the mouse over color Y it becomes color
> X
>
> Is it possible to be done?
>
> Thanks a lot for any help
>
> --
> Laert Jansen
> www.laertjansen.com
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>



-- 
Laert Jansen
www.laertjansen.com


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] How to make diagonal lines change color?

[michael.brockington]

>-Original Message-
>From: [EMAIL PROTECTED] 
>[mailto:[EMAIL PROTECTED] On Behalf Of Stuart Foulstone
>Sent: Friday, April 11, 2008 9:40 AM
>To: wsg@webstandardsgroup.org
>Subject: Re: [WSG] How to make diagonal lines change colour?
>
>Hi,
>
>From a usability and accessibility point of view doing this is 
>a very bad idea, so is way OT for Web Standards Group.


How can you possibly say that until we have a proposed implementation on
the table? It does sound like it could be a little irritating, but
certainly there is little likelihood if it interfering with the more
extreme examples of AT.

Regards,
Mike


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] How to make diagonal lines change color?

[Stuart Foulstone]

Hi,

>From a usability and accessibility point of view doing this is a very bad
idea, so is way OT for Web Standards Group.


On Thu, April 10, 2008 11:54 pm, Laert Jansen wrote:
> Hello everyone.
>
> Well there´s something I want to do but I have no idea if it´s possible to
> be done and how would I do this.
>
> My website (www.laertjansen.com) has some two color diagonal lines as a
> bg.
>
> What I want to do is: On the mouse over color X it becomes color Y
>On the mouse over color Y it becomes color
> X
>
> Is it possible to be done?
>
> Thanks a lot for any help
>
> --
> Laert Jansen
> www.laertjansen.com
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] How to make diagonal lines change color?

[Ben Dodson]

Completely unrelated but a minor bugbear from me - If you disable images,
then you can't read your links as they are white and the usual browser
background color default is white.  This can be remedied by adding a
background color of black to your body so that the links will now become
visible when images are disabled.  You can test this easily by using the Web
Developer toolbar for Firefox.
Cheers,

Ben

-- 
e: [EMAIL PROTECTED]
w: http://bendodson.com/



On Thu, Apr 10, 2008 at 11:54 PM, Laert Jansen <[EMAIL PROTECTED]>
wrote:

> Hello everyone.
>
> Well there´s something I want to do but I have no idea if it´s possible to
> be done and how would I do this.
>
> My website (www.laertjansen.com) has some two color diagonal lines as a
> bg.
>
> What I want to do is: On the mouse over color X it becomes color Y
>On the mouse over color Y it becomes color
> X
>
> Is it possible to be done?
>
> Thanks a lot for any help
>
> --
> Laert Jansen
> www.laertjansen.com
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] How to make diagonal lines change color?

[Martin Heiden]

Kane,

on Friday, April 11, 2008 at 03:03 wsg@webstandardsgroup.org wrote:

> If I HAD to do something like this, I would create a Gif image that had a
> transparency where you wanted the colour change.

Yes, but you should use a PNG with alpha-transparency. The lines are
diagonal, so you need some anti-aliasing effects to make it smooth.
GIF-transparency doesn't allow that.

With a PNG you get a problem in IE6 though, 'cause you can't simply
scale it (the diagonal line would be thicker than intended an of cause
you just get one...). And tiling isn't supported by the filter.

regards,

  Martin.



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] How to make diagonal lines change color?

[michael.brockington]

Do I understand this right: you want the background to change, as the mouse 
passes over one of these diagonal lines - or just when the user mouses over any 
part of the background?
 
Mike




From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Laert 
Jansen
Sent: Thursday, April 10, 2008 11:55 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] How to make diagonal lines change color?


Hello everyone. 

Well there´s something I want to do but I have no idea if it´s possible 
to be done and how would I do this.

My website (www.laertjansen.com) has some two color diagonal lines as a 
bg.

What I want to do is: On the mouse over color X it becomes color Y 
   On the mouse over color Y it becomes 
color X

Is it possible to be done?

Thanks a lot for any help

-- 
Laert Jansen
www.laertjansen.com




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] How to make diagonal lines change color?

[Kane Tapping]

Hi ,

If I HAD to do something like this, I would create a Gif image that had a 
transparency where you wanted the colour change.

Then use the GIF as a background image on a item and specify a background 
colour that changed on hover.

div#name {background: #f00 url(image-name.gif) repeat;}
div#name:hover {background-color #00f;}

This method would remove the issues with pre-caching a second image that 
you cant get around with using offsets because you want to tile the image.

Kind Regards,

Kane Tapping
Web Standards Developer
Web and Content Management Services
Griffith University. 4111. Australia.
[EMAIL PROTECTED]
Phone: +61 (0)7 3735 7630





"Laert Jansen" <[EMAIL PROTECTED]> 
Sent by: [EMAIL PROTECTED]
11/04/2008 08:54 AM
Please respond to
wsg@webstandardsgroup.org


To
wsg@webstandardsgroup.org
cc

Subject
[WSG] How to make diagonal lines change color?






Hello everyone. 

Well there´s something I want to do but I have no idea if it´s possible to 
be done and how would I do this.

My website (www.laertjansen.com) has some two color diagonal lines as a 
bg.

What I want to do is: On the mouse over color X it becomes color Y 
   On the mouse over color Y it becomes color 
X

Is it possible to be done?

Thanks a lot for any help

-- 
Laert Jansen
www.laertjansen.com

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*** 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] How to make diagonal lines change color?

[Paul Bennett]

warning: untested!

You could try this* (won't people almost _always_ be mousing over the page body 
though?)

body{background: #000 url(/path/to/image.gif) repeat;}
body:hover{background: #000 url(/path/to/somotherimage.gif) repeat;}

* won't work in IE 6 though

HTH?

Paul


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] How to make diagonal lines change color?

[Svip]

Well, you could simply change the background image to create the
illusion of it changing colour.  However, I think technically it is
way too confusing for it to change colour when you browse the site.

A different note, your page claims to be in Portuguese, when the only
Portuguese text appearing on the site are in images, and all written
text is English.

Regards,
Svip

2008/4/11, Laert Jansen <[EMAIL PROTECTED]>:
> Hello everyone.
>
> Well there´s something I want to do but I have no idea if it´s possible to
> be done and how would I do this.
>
> My website (www.laertjansen.com) has some two color diagonal lines as a bg.
>
> What I want to do is: On the mouse over color X it becomes color Y
>On the mouse over color Y it becomes color X
>
> Is it possible to be done?
>
> Thanks a lot for any help
>
> --
> Laert Jansen
> www.laertjansen.com
>
> ***
> List Guidelines:
> http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe:
> http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

[WSG] How to make diagonal lines change color?

[Laert Jansen]

Hello everyone.

Well there´s something I want to do but I have no idea if it´s possible to
be done and how would I do this.

My website (www.laertjansen.com) has some two color diagonal lines as a bg.

What I want to do is: On the mouse over color X it becomes color Y
   On the mouse over color Y it becomes color X

Is it possible to be done?

Thanks a lot for any help

-- 
Laert Jansen
www.laertjansen.com


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***