Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › CSS border for an image.
New Posts  All Forums:Forum Nav:

CSS border for an image. - Page 2

post #11 of 14
Quote:
Originally Posted by Mrzev View Post

EXPLAIN! =D

Its not a normal img its an SVG image. I copied the massive xlink:href string straight to my browser and it showed me the image.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAP5JREFUGJVt0D8rhXEAxfHP1cOz0FUKtwx3EQMZKCFFXaK8AtSVXQZF8hZk8hIMRoMYlTBRrEoGQvLn3m6GX+lmePx5wplO53yH04n8VQ2yKKOaLqKUz8Y78UpoDyNxY9yk4tW1w7AaNpx7SMMNTmyHgTABQUjSDv1y+syZdu4hgng3XvkC/6jHqHVrChYiCPkw/l2+YB8FtCRRnI/HglCTzKiT+4ZPMYstzCRRqA+tyCbwuxLawCD20J+aUlFCOYHvHerUJYN6TP7afecI1QS+tezMsF7dMr/AC5euLP1cV/Rm15Bjm5oV1Gr27tmTAzcWzXtM/8yUCor/3vepD5FpRMfrirKkAAAAAElFTkSuQmCC

Its a Green circle with a dot in the center.

That's not a SVG, it's a regular PNG but base64 encoded to insert into HTML. You can do that with any PNG or JPEG. smile.gif

So you'll have your image:
Code:
<img class="greendot" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAP5JREFUGJVt0D8rhXEAxfHP1cOz0FUKtwx3EQMZKCFFXaK8AtSVXQZF8hZk8hIMRoMYlTBRrEoGQvLn3m6GX+lmePx5wplO53yH04n8VQ2yKKOaLqKUz8Y78UpoDyNxY9yk4tW1w7AaNpx7SMMNTmyHgTABQUjSDv1y+syZdu4hgng3XvkC/6jHqHVrChYiCPkw/l2+YB8FtCRRnI/HglCTzKiT+4ZPMYstzCRRqA+tyCbwuxLawCD20J+aUlFCOYHvHerUJYN6TP7afecI1QS+tezMsF7dMr/AC5euLP1cV/Rm15Bjm5oV1Gr27tmTAzcWzXtM/8yUCor/3vepD5FpRMfrirKkAAAAAElFTkSuQmCC">

here i've assigned a class name of "greendot". So in your CSS you set the border properties of greendot:
Code:
.greendot {
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
}

You'll probably have to play around with this to see if it works (I've not tested it). But something like that should work. However absolute worse case scenario, you can just wrap the image inside a div and do exactly the same thing.
post #12 of 14
Thread Starter 
I added a svg image{} css thing with that and it was doing nothing. When i wrapped div's around it, the graphics did not display. This may have been caused by something from dojo or one of the css themes i was using. Thanks for the advice tho.
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
post #13 of 14
What are you using to draw on the map? Something like open layers?
Mini Trendy
(0 items)
  
Reply
Mini Trendy
(0 items)
  
Reply
post #14 of 14
Use
Code:
border-top-left-radius: -px;
border-top-right-radius: -px;
border-bottom-left-radius: -px;
border-bottom-right-radius: -px;

and then just set the sizes until the border makes a circular shape around the image.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › CSS border for an image.