Jump to content

_brym

Members
  • Posts

    10
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by _brym

  1. Let's set a few things up first. Firstly, in HTML create the image tag with an id and some alt text:

    <img id="image" src="image.png" alt="image-text">

    Next, in JavaScript let's assign the image tag to a variable. Doing so will make it's alt property accessible for later use in the div tag:

    // assign the img tag by id to the "img" variable
    let img = document.getElementById("image");

     

    Now let's create an empty div in HTML, with an id of "alt-text". You can do this entirely in JS, but let's use HTML for this example. Add it just below your img tag from the first step:

    <div id="alt-text"></div>

    Next, in JavaScript let's create a variable to reference the empty div and a function to set the text and background colour of the div:

    imgFunc = () => {
    	// assign the empty div to a variable
    	let altDiv = document.getElemenetById("alt-text");
    
    	// set the text of the div to the alt property from the img variable created earlier
    	altDiv.innerHtml = img.alt;
    
    	// set the background colour of the div
    	altDiv.style.backgroundColor = "blue";
    }

    Now, there are better ways to set the text, but innerHtml is a quick way to demonstrate. Explore the options available to you on the W3Schools website.
    I've gone with blue here as the background colour, but you can choose whatever colour you want.

    Finally, let's add a mouseover event to the img tag from the first step, and use it to call our function:

    <img id="image" src="image.png" alt="image-text" onmouseover="imgFunc()">

    And that's it.

    • Thanks 1
  2. On 9/17/2021 at 8:33 PM, we1 said:

    Hey guys,

     

    Are you aware of the button wrap technique with a href? It’s not working for me. I thought it’s an internal error with HTML5. Let’s get together on this and see what’s wrong. Hope to hear from you soon!

    Can you offer more specifics on what you're hoping to achieve? There's far too many ways to create buttons outside of simply using a button tag in a form. For example, CSS-based, image-based, entirely JavaScript-based through DOM manipulation. You could get unnecessarily creative and launch multiple server instances like Rust/Rocket, Python, Node, etc, with each generating separate buttons of their own and pipe them all through an Apache ProxyPass if you really wanted. Excessive, but creative nonetheless.

  3. Who's your provider? If it's a shared hosting provider like Hostgator or the like, chances are it's running Apache/cPanel. In which case, they won't let you. If you want to use a service provider and not your own computer, you'll need a provider like Google Cloud, Amazon AWS, Linode, Digital Ocean, etc. Somebody who will let you run Virtual Machines or instances of operating systems where you would then remote in or use their web interface to install node and any dependencies.

    The alternative is to self-host. That's easy to do if you can afford to leave a computer running (for production/live websites). To get around the lack of static IP addresses, use a 3rd party service like NoIP.

×
×
  • Create New...