Looking to showcase website HTML code by simply clicking on a banner image?

I am looking to implement a feature where banner HTML code is displayed in a popup on website when the banner is clicked.

For instance, an example of a banner could be:

<img src="https://myweb.com/images/banners/1.gif">

Upon clicking the banner image, I would like to display the following data in a popup:

<a href="myweb.com" target="_blank"><img src="https://myweb.com/images/banners/1.gif" border=0></a><br>[url=https://myweb.com] [img]https://myweb.com/images/banners/1.gif[/img] [/url]

I am seeking assistance as I do not have the expertise in resolving this issue. Any help or guidance would be greatly appreciated.

Thank you

javascripthtmlcss

Answer №1

If you only need to show simple text in a popup, perhaps using a confirm or alert prompt could be an option:

<a href="mywebsite.com" target="_blank" onClick="displayHTML()">
  <img src="https://mywebsite.com/images/banners/1.gif" border=0>
</a>

<script>
function displayHTML(){
    alert("<img src=\"https://mywebsite.com/images/banners/1.gif\" border=0>");
}
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with CSS color gradient transparency

I've successfully implemented a gradient that transitions from transparent to white by using the following CSS code: linear-gradient(to right, transparent, white) If you want to see it in action, click on this link: http://jsfiddle.net/fs8gpha2/ Al ...

csslinear-gradients

Using a function with a parameter as an argument in an event handler

Imagine you have the code snippet below: $('#from').focus(listExpand(1)); $('#to').focus(listExpand(3)); I am facing an issue as the code is not behaving as expected. I believe the problem lies in passing a function result instead of ...

javascriptjquery

After successfully uploading a file, refresh the file list using AngularJS, DropzoneJS, and JSON

In my "file manager page," I am using DropzoneJS for uploading files and AngularJS ng-repeat to display all the saved files. The file list is retrieved through an ng-controller that uses an http.get request to fetch a JSON file with the file list. When Dr ...

javascriptphpjsonangularjsdropzone.js

Tips for fixing an error encountered when running a react native project for the first time

I am encountering some errors while attempting to run this project for the first time and I am unable to resolve them. Below is the content of the package.json file: { "scripts": { "start": "expo start", "andro ...

javascriptreact-nativenpmexpo

Collapsing or expanding the Material UI accordion may lead to flickering on the page

import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import Accordion from "@material-ui/core/Accordion"; import AccordionDetails from "@material-ui/core/AccordionDetails"; import Accordi ...

javascripthtmlcssreactjsmaterial-ui

What steps can be taken to resolve the vulnerability in webpack-pwa-manifest?

Looking for solutions to address the [email protected] and minimist vulnerability. I attempted removing node/modules and package-lock.json, followed by a fresh npm installation, but the issue persists. Any suggestions would be greatly appreciated. Scr ...

javascriptreactjsnpmwebpackminimist

Clicking on the image "Nav" will load the div into the designated target and set its display to none. The div will

Can someone help me with loading a div into a target from an onclick using image navigation? I also need to hide the inactive divs, ensuring that only the 1st div is initially loaded when the page loads. I've tried searching for a solution but haven&a ...

javascripthtmljquery

The alignment of elements in the div seems to be slightly skewed

Currently, I am in the process of creating a website with the temporary name yeet.io. I am facing an issue where I am attempting to center both an input and h1 element inside a div vertically and horizontally, but they keep appearing misaligned for some r ...

javascriptjqueryhtmlcss

Having trouble passing multiple associative array values from JavaScript/AJAX to PHP

We have been encountering an issue when trying to pass multiple associative array values from JavaScript/AJAX to PHP, as the PHP file is receiving an empty object/array. Could someone kindly assist us in retrieving the values of an associative array from ...

javascriptphpjsonajax

NextAuth encountered a CLIENT_FETCH_ERROR error while processing the session callback

Encountering issues while trying to set up nextauth v4. Keep getting this error: Client fetch error, Unexpected end of JSON input {error: {…}, path: 'session', message: 'JSON.parse: unexpected end of data at line 1 column 1 of the JSON d ...

javascriptauthenticationnext.jsjwtnext-auth

Stop the change event from occurring on a textarea when the user clicks on an external cancel button

In a particular scenario, there is a textarea with an autosave feature triggered by the change event. When the textarea is focused on, Save and Cancel buttons appear at the bottom, providing users with options in case they prefer not to simply click outsid ...

javascriptjqueryajax

Creating a Dynamic Dependent Dropdown with Jquery and Ajax in PHP

As a newbie in coding, I stumbled upon some valuable information to enhance my register form using Ajax. While the PHP files seem to be functioning correctly, I suspect that the JS file is not performing as expected. In the register form, you'll find ...

javascriptphpjquerymysqlajax

Tips for Elevating State with React Router Version 6

Looking for advice on sharing state between two routes in my project. I'm debating whether to lift state up from my AddContact component to either the Layout or App components in order to share it with the ContactList. The Layout component simply disp ...

javascriptreactjsreact-hooksreact-routerreact-router-dom

Scrolling horizontally to display dynamic columns based on a search query in AngularJS

I am facing a challenge with implementing search functionality in a table that has multiple dynamic columns with a horizontal scrollbar. The goal is for users to be able to search for a specific column name or data, and if a match is found, the scrollbar s ...

htmlcssangularjs

sending information to PHP through AJAX dynamically

I implemented a registration form that utilizes function user_reg(user_name,user_email,user_pswd) { var serverpath=window.location; alert(serverpath); var dataString = 'name='+ user_name + '&email=' + user_email + '&psw ...

javascriptphpajax

CSS Mouse Out Hover Effects with Long Duration

The CSS effect in the codepen below showcases a hover feature where the image grows when hovered over and gradually decreases back to its original size when the mouse is moved away. However, I am looking to change this decrease so that it happens instantly ...

htmlcss

React TSX file not recognizing JSON data stored in an HTML data attribute

I am having some trouble with implementing the password toggle component from the Preline UI. Here is how the component looks: "use client" import React, { ChangeEvent, MouseEventHandler, useEffect } from "react"; export default functi ...

javascripthtmlreactjstypescriptnext.js

VueJS does not refresh other components in the application

I am working with two components. Let's start with Component 1: <template> <div> <div class="form-group"> <label for="group">Category</label> <select name="category" v-model="category" @change="setCategory(ca ...

javascriptvue.js

What is the Best Way to Create a Smooth Border-Bottom Transition?

I'm currently diving into the world of HTML5 and CSS. I want to replicate the layout from . Specifically, I am interested in adding a transition effect to the border bottom of certain elements such as "View Our Listings", "The Agency Daily", "Meet our ...

htmlcss

javascript issue with fetching data from URL using the GET method

Here is my attempt to fetch a JSON file from a server using asynchronous JavaScript promises. I am experiencing an issue where the result is undefined when using a specific URL, but it works when I use a different URL. Below is the working code with a dif ...

javascriptjqueryjson