I can get this to work when i use the opacity attribute, but can't
seem to get it to change the stroke color onmouseover. Still very new
to svg and the documentation is somewhat sparce thus far. I know i
got too many things under the 'highlight' function, was trying
everything i could think of and/or read through the group here. any
help you can provide would be greatly appriciated, or perhaps links
to good reference sites, i think i've read through most of the
tutorial sites. Cheers!
?xml version=1.0 standalone=no?!DOCTYPE svg PUBLIC -
//W3C//DTD SVG
1.1//EN http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd;
svg width=24cm height=12cm viewBox=0 0 4000 2000
onload=Initialize(evt);xmlns=http://www.w3.org/2000/svg;
version=1.1 descExample polygon01 - star and hexagon/desc
script
![CDATA[
function Initialize(LoadEvent)
{
var svgdoc = document;
var svgns = 'http://www.w3.org/2000/svg';
var xlinkns = 'http://www.w3.org/1999/xlink';
mp = aaab;
mp += ;
mp += ;
mp += ;
mp += aaa;
mp += aaa aa;
mp += aaa aaa;
mp += ;
mp += ;
mp += ;
mp += ;
mp += ;
mp += ;
mp += ;
mp += ;
mp += ;
mp += ;
mp += ;
mp += ;
mp += ;
mp2 = aaab;
mp2 += ;
mp2 += ;
mp2 += ;
mp2 += ;
mp2 += ;
mp2 += aaab;
mp2 += aaabbaaa;
mp2 += ;
mp2 += ;
mp2 += ;
mp2 += aaab;
mp2 += ;
mp2 += ;
mp2 += ;
mp2 += ;
mp2 += ;
mp2 += ;
mp2 += ;
mp2 += ;
var curC = 0;
for (y=1; y=20; y++) {
for (x=1; x=20; x++) {
var use = svgdoc.createElementNS(svgns, 'use');
use.setAttributeNS(null, 'x', ((x*100)-(y*100)+1900) );
use.setAttributeNS(null, 'y', ((y*50)+(x*50)-100) );
use.style.setProperty(stroke, black);
use.style.setProperty(stroke-width, 2);
use.setAttributeNS(null, 'onmouseover', 'Highlight(evt);' );
use.setAttributeNS(null, 'onmouseout', 'Unhighlight(evt);' );
if (mp.substr(curC,1)=='a') { use.setAttributeNS
(xlinkns, 'href', '#tile'); }
if (mp.substr(curC,1)=='b') { use.setAttributeNS
(xlinkns, 'href', '#tile1'); }
svgdoc.documentElement.appendChild(use);
curC++;
}
}
var curC = 0;
for (y=1; y=20; y++) {
for (x=1; x=20; x++) {
if (mp2.substr(curC,1)=='b') {
var use = svgdoc.createElementNS(svgns, 'use');
use.setAttributeNS(null, 'x', ((x*100)-(y*100)+1900 +69) );
use.setAttributeNS(null, 'y', ((y*50)+(x*50)-100 -150) );
use.setAttributeNS(xlinkns, 'href', '#pinetree');
svgdoc.documentElement.appendChild(use);
}
curC++;
}
}
}
function Highlight(evt) {
// evt.target.setAttribute(opacity, .5);
evt.target.setAttribute(stroke, red);
evt.target.setAttributeNS(null,stroke, red);
evt.target.style.setProperty(stroke, red);
evt.target.style.setProperty(stroke-width, 2);
}
function Unhighlight(evt) {
// evt.target.setAttribute(opacity, 1);
// evt.target.style.setProperty(stroke, black);
}
]]
/script
pattern id=innerGraphBackgound patternUnits=userSpaceOnUse x=0
y=0 width=500 height=500
image xlink:href=images/grasstexture.png x=0 y=0
width=500 height=500 style=opacity:1.0;image-
rendering:optimizeSpeed;/
/pattern
pattern id=innerGraphBackgound2 patternUnits=userSpaceOnUse
x=0 y=0 width=500 height=500
image xlink:href=images/texturewater.jpg x=0 y=0 width=500
height=500
style=opacity:1.0;image-rendering:optimizeSpeed; /
/pattern
defs
polygon id=tile opacity=1.0
points=0,50 100,0 200,50 100,100
style=stroke:rgb(0,0,0);stroke-width:3;fill: url
(#innerGraphBackgound)
set attributeName=stroke from=black to=red
begin=mouseover end=mouseout/
/polygon
/defs
defs
polygon id=tile1 style=fill: url(#innerGraphBackgound2)
stroke=black stroke-width=1 points=0,50 100,0 200,50
100,100
/
/defs
defs
image id=pinetree xlink:href=images/pinetree.gif x=0 y=0
width=123 height=200
style=opacity:1.0;image-rendering:optimizeSpeed;
/
/defs
/svg
-
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click edit my
membership
Yahoo! Groups Links
* To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
* To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
* Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
