musicman

Security?

or use the href attribute as Data:

jQuery

$( "#div1" ).data( "href", "#222" );
console.log( $( "#div1" ).data( "href" ) ); // #222

Hi,
this is from the page source:

<section id="block-block-33" class="block block-block col-md-2 clearfix"> <p> <img alt="dog" src="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png" /><br /><svg height="0" width="0"><br /><defs><br /><clippath id="svgTextPath"></clippath></defs></svg></p> <polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1"></polygon><br /><br /> </section>

<section id="block-block-35" class="block block-block clearfix">      
  <p> <img alt="dog" src="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png" /><br /><svg height="0" width="0"><br /><defs><br /><clippath id="svgTextPath"></clippath></defs></svg></p>
<polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1"></polygon><br /><br />
</section>

The polygon is part of the SVG, put it in the defs tag like so:

<img alt="dog" src="dog.jpg" />
 <svg height="0" width="0">
 <defs>
 <clipPath id="svgTextPath">
 <polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1" />
 </clipPath>
 </defs>
</svg>

and where the clip-path CSS is? clip-path works in Mozilla (have no idea with Chrome). I attached the script that worked.

If it's still doesn't work, like dsonesuk said, some alternative methods would be great.

clip path css - 2.html

Hi, can you share the page where the svg path added?

musicman - I dont know how to make arrow image. my goal is to make the arrow image.

Hi,

You can clip an image to svg path like following:

CSS

img { clip-path: url( #svgTextPath ); }

HTML

 <img alt="dog" src="dog.jpg" />
 <svg height="0" width="0">
 <defs>
 <clipPath id="svgTextPath">
 <polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1" />
 </clipPath>
 </defs>
</svg>

It will insert the img to the svg path and the path will crop the img.

But I suggest to have an individual arrow image in png and then use the CSS content property.

Hi,

My test page works fine in Chrome. I'm using font-face in my CSS:

@font-face{ font-family:Toba; src:url(styles/fonts/Toba.ttf); }

but in Mozilla log, I always get this error message:

downloadable font: download failed (font-family: "Toba" style:normal weight:normal stretch:normal src index:0): status=2147746065 source: ***

the font never showed up. Well, it succeed sometimes but most time didn't, weird.

How we use font-face for Mozilla?

Thanks!

Thanks @justsomeguy! Yes, my website host provides MySQL. I'm so excited to learn more.

Hi,

how the result looks like? is the injected image showed up?

note: the url on the "content" property should linked to the "arrow" image, not to the same image ( tek%20solusion%20logo.png ).

Oh, Access is the only one I know.

I want to make a HTML login page and manage user account database using Javascript or PHP. Where I should keep user data?

Hi,

you can use CSS content property.

img:before {
    content: url(arrow.gif);
}

Hi,

I need a tutorial (in .pdf) on how to make a login page for a web app and secure password database using MS Access.

Do you have any reference?

Thanks!

Hi,

I'm a music composer but web coding poisoned me so bad and I love it.