SVG :hover [was: hover]

Report · Jul 17, 2019

Hi,

Upon mouse-over, I want to change the color of Twitter logo.

How would I do?

Hosun Kang

Report · Jul 17, 2019

Because of the way that you are displaying the vector image, you cannot restyle the image using pseudo classes like :hover.

To be able to use a pseudo class, you will need to embed the image in your document as in Adding vector graphics to the Web - Learn web development | MDN . What is not shown in the article is the <use> element which takes nodes from within the SVG document and duplicates them. See https://css-tricks.com/svg-use-with-external-reference-take-2/

To illustrate, copy the below code and paste it into a new document and view in browser.

<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Using an SVG</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
    /* Can be in an external style sheet */
    svg.btn-youtube {
      fill: red;
      width: 80px;
      height: auto;
    }
    svg.btn-youtube:hover {
      fill: gray;
    }
    svg .image {
      fill: white;
    }
</style>
</head>
<body is="dmx-app" id="test">
    
    <svg style="display: none;">
      <defs>
        <symbol id="icon-video" viewBox="0 0 1024 721">
          <title>YouTube Play Button</title>
          <path class="button" d="M1023.6,361.5c0,24.5,0.9,49-0.2,73.5c-1.7,36.6-4.7,73.1-7.3,109.6c-2,28.9-8.5,56.9-19.3,83.8 c-18.2,45.4-52.8,70.6-100,78.3c-23.1,3.8-46.7,4.9-70.1,6.1c-41.1,2.1-82.2,3.5-123.3,5c-22.1,0.8-44.3,1.1-66.4,1.5 c-42.3,0.6-84.6,1.5-126.9,1.3c-46.1-0.1-92.3-1-138.4-1.9c-36.6-0.7-73.2-1.6-109.9-3c-30.8-1.2-61.6-2.4-92.2-5 c-19-1.6-38.1-4.6-56.6-9.3c-43-11.1-71.6-38.4-86-80.7c-8.9-26-14.7-52.5-16.6-79.9c-2.5-35.4-5.8-70.7-6.7-106.1 C2.5,389.7,2.8,344.9,3.3,300c0.5-48,4-95.8,10.1-143.4c3.3-25.8,10.5-50.9,22.3-74.2c18.4-36.2,48.9-57,87.9-65 c17.2-3.5,34.9-4.9,52.5-5.9c38.2-2.2,76.5-3.9,114.7-5.2c32.9-1.2,65.9-1.7,98.9-2.3c25.6-0.5,51.3-0.8,76.9-1 c24.3-0.2,48.6-0.5,73-0.5c30.3,0.1,60.6,0.5,90.9,1c28.6,0.5,57.3,1,85.9,2c44.6,1.7,89.2,3.5,133.7,5.9 c21.2,1.1,42.7,2.1,63.2,8.2c44.1,13.2,73,41.9,87.5,85.7c8.8,26.7,14.1,54,15.9,82c2.2,34.2,5,68.4,6.5,102.7 C1024.5,313.8,1023.7,337.6,1023.6,361.5C1023.6,361.5,1023.6,361.5,1023.6,361.5z M408.2,494c92.1-47.8,183.5-95.1,275.9-143 c-92.5-48.3-183.9-96-275.9-144C408.2,303,408.2,397.9,408.2,494z"></path>
          <path class="image" d="M408.2,494c0-96.1,0-191,0-287c92,48,183.4,95.7,275.9,144C591.6,398.9,500.3,446.3,408.2,494z"></path>
        </symbol>
      </defs>
    </svg>
    
    <svg class="btn-youtube">
      <use xlink:href="#icon-video"></use>
    </svg>
</body></html>

Wappler, the only real Dreamweaver alternative.

Report · Jul 18, 2019

A simple way is to apply a css filter on hover -

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Report · Jul 18, 2019

Simplest way would be to use fontawesome icons. Link the css stylesheet to your page:

Add the below tag where you want the twitter logo to appear:

Style the icon with css:

.fa-twitter {

font-size: 30px;

}

.fa-twitter:hover {

color: yellow;

}

Report · Jul 18, 2019

I 2nd the Font Awesome approach. That's how I do it 90% of the time. Plus you can stack multiple FA icons for some interesting effects.

https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 18, 2019

Hi,

Thank you very much for your reply.

Upon click, I want to connect the mail logo to my email address (mail@gmail.com). [Edited by moderator]

Is there any solution?

Global Invisible Hand

Hosun Kang

Report · Jul 18, 2019

Hosun wrote
Upon click, I want to connect the mail logo to my email address

Don't do it. Posting your e-mail address online where robots can see it is irresponsible. It promotes spam and puts the owner's e-mail at risk. Besides, mailto links don't work for the majority of people who don't have an e-mail client like Outlook installed on their devices.

Always us a contact form with a secure server-side script that:

hides the e-mail address from harvesters,
stops spam,
validates form fields,
sanitizes data,
gives users feedback
and when all conditions are right, tells your server to send the message.

3 Part tutorial using the PHP mail () function.

Responsive Contact Form with Bootstrap and PHP (Part 1)

PHP Mailer Library

GitHub - PHPMailer/PHPMailer: The classic email sending library for PHP

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 20, 2019

Hi,

Thank you very much for your instruction.

I've been through Part 1.

Bootstrap Form and PHP Script

Question 1.

In Part 2, where would I put the PHP code?

It looks like downloading something.

Question 2.

Should I subscribe to a server for an email address NOW?

(I want to upload my files to a server much later.

I can't figure out when my project will end.)

Hosun Kang

Report · Jul 20, 2019

#1 PHP code goes above your HTML code in the same document called contact.php.

Error reporting goes in the <form>.

#2 you will need to test your project before it goes live. It's best to get your domain name and server as soon as you can. Get a free e-mail address from G-mail.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 21, 2019

Hi,

Q1.

Is there any way to test the PHP?

contact.php

https://drive.google.com/open?id=1PNvzmp_Ihb47WVv4kMQJC8X-c3xRefID

Q2.

How can I link "contact.php" to my web?

Global Invisible Hand

Hosun Kang

Report · Jul 21, 2019

To test a contact form, you must upload it to a server that supports PHP mail () function. If unsure, ask your hosting provider.

Add a link to your index page that points to your contact.php page.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 23, 2019

Hi,

Upon clicking the email icon, I want to open a new window with

- the same header

- the Form placed in the middle of <main>.

For the purpose, I added your "HTML5 and Bootstrap" into <main></main>.

The problem is the location of those two icons in <header>.

Is there any solution?

HTML5 and Bootstrap

(Clicking the link above, <header> looks OK.

But the problem is the Form.)

Hosun Kang

Report · Jul 23, 2019

Read about SSI (server-side-includes) for sitewide headers, footers and navigation elements.

Alt-Web Design & Publishing: Server-Side Includes with PHP

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 25, 2019

Hi,

In Alt-Web Design & Publishing: Responsive Contact Form with Bootstrap 3.2 and PHP (Part 3),

what is the part for (in the red rectangle)?

Hosun Kang

Report · Jul 25, 2019

Hosun wrote
Hi,
In Alt-Web Design & Publishing: Responsive Contact Form with Bootstrap 3.2 and PHP (Part 3),
what is the part for (in the red rectangle)?
Hosun Kang

That tutorial is quite a few years old now and although still relevant for the form processing part the code you have marked in red is not. That was specifically for browsers before Internet Explorer 9, all long dead, along with Internet Explorer 9 itself.

Report · Jul 25, 2019

There was no difference with or without it.

I know the reason.

Hosun Kang

Report · Jul 25, 2019

The HTML5 Shiv was added to help older IE browsers understand HTML5 tags. It's no longer required unless you know for sure that your target users are on older computers and browsers.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 27, 2019

Hi,

In your link (https://alt-web.blogspot.com/2015/07/server-side-includes-with-php.html), which one (white or yellow) should go to SSI (header.html)?

Global Invisible Hand

Hosun Kang

Report · Jul 28, 2019

I had a look at your style sheet and found that the content could be reduced somewhat.

To give each anchor element contained within a container with a class of col* a PDF icon, do the following:

div[class^="col"] a::after {
content: '\f1c1';
font-family: 'Font Awesome 5 Free';
font-size: 14px;
font-weight: 300;
margin-left: 4px;
}

To change the icon for containers with a class of col2 line* do the following:

div .col2 [class^="line"] a::after {
content: '\f15c';
}

Edit: ^ = starting with.

2nd Edit: Much better is to give the <a> a class and use that as the selector as in

<a class="pdf" ....

.

and

a.pdf::after {.......

Wappler, the only real Dreamweaver alternative.

Report · Jul 28, 2019

Keep it simple instead of all the goofy stuff. Thats the problem with web development today, developers are looking for what seems to be the most complex solutions to perform the easiest of tasks, personally l just don't get that approach. The culprits for taking such approaches are of course nearly always those that deploy a sledgehammer to crack a nut, the large well known players. These awfully verbose techiques then filter down and are deployed by the main steam developer on the assumption, that because some multi billion dollar company approves, it must be a good option for their small project.

Report · Jul 28, 2019

Hosun wrote
Hi,
In your link (https://alt-web.blogspot.com/2015/07/server-side-includes-with-php.html), which one (white or yellow) should go to SSI (header.html)?

It does not matter. Personally I would go for yellow; but then must remember to include <header> in my main document.

Wappler, the only real Dreamweaver alternative.

Report · Jul 28, 2019

Either white or yellow. I personally prefer to keep some basic structural elements on the page when using include files so l would personally go with the yellow block of code.

Report · Jul 28, 2019

Hi,

For SSI, I cut and paste <header>.

Are there more things to do to keep compatibility between "index.html" and "header.html"? (in "header.html")

Global Invisible Hand

Hosun Kang

Report · Jul 28, 2019

The idea is to seperate your 'header' content from the page.

I dont use ssi. I usually use php includes but if you don't have php set up you can use javascript to achieve the same results.

Make a file and name it - header.js - and save it in your website folder.

In the header.js file paste the below code. (Make sure you select the back-ticks in the code below - template literals ` `). Nothing else should be in your header.js file apart from the code you want to include into other pages.

// assign 'header' tag to a variable named header

var header = document.querySelector('header');

//inject 'header code' into the header tag

header.innerHTML = `

</div>

<h3>The Global Invisible Hand</h3>

<h3>2nd edition of Volume One</h3>

<h3>HOSUN KANG</h3>

</div>

</div>

`

Then include a link to the header.js file in any page you want the header code to appear:

Report · Jul 28, 2019

although I'm not a fan of a JS insertion instead of a server-side include, (from a query and referencing point of view) so if going for a JS injection, it might be better to use insertAdjacentHTML rather than innerHTML, don't you think?

element.insertAdjacentHTML - Référence Web API | MDN

SVG :hover [was: hover]

1 Correct answer