Form Rolling Over

I recently updated the navigation bar on our pending site by incorporating styled hyperlinks.

Initially, one of these hyperlinks directed to PayPal, but due to security concerns, I had to replace it with an encrypted button instead.

The challenge I'm facing is that the hover image-swap effect I have set up for the links doesn't work with the form image. I've experimented with various methods (such as changing from this.src to that.src or using hover based on shifting background position) to achieve the desired result, but the complexity of forms compared to simple hyperlinks has made it difficult.

Looking at my code below, can someone suggest a non-JavaScript solution to either move the 'pp3.gif' position or swap two other images to replicate the CSS hover image-swap effect I already have for the other list elements?

    <li><a href="info.htm" target="iframe1">Information</a></li>
    <li>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
           <input type="hidden" name="cmd" value="_s-xclick">
           <input type="image" src="../buttons/pp3.gif" name="submit">
           <input type="hidden" name="encrypted" value="-----BEGIN PKCS7 ... END PKCS7-----">
       </form>
    </li>
    <li><a href="delivery.htm" target="iframe1">Livraison</a></li>

Thankee! Dave

Answer №1

My recommendation is to avoid using <input type="image">. Instead, consider styling the input directly with CSS for more flexibility. Here is an example:

http://jsfiddle.net/6S8Hs/

<ul>
<li><a href="info.htm" target="iframe1">Information</a></li>

<li>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_s-xclick"/>
        <input class="hover-effect" type="submit" name="submit"/>
        <input type="hidden" name="encrypted" value="-----BEGIN PKCS7 ... END PKCS7-----"/>
    </form>
</li>
<li><a href="delivery.htm" target="iframe1">Livraison</a></li></ul>

ul{ list-style-type: none; }

ul li{ 
    display:inline;
    float:left;
    margin-left:10px;
}

.hover-effect{
    width:50px;
    height: 50px;
    background-image:url("http://a.deviantart.net/avatars/t/o/toaster-kitten.jpg");
    display:block;
    border:none;
    color:transparent;
}

.hover-effect:hover{
   background-image:url("http://img.ehowcdn.com/other-people/ehow/images/a06/27/bh/care-newborn-kitten-mother-800x800.jpg"); 
}

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

Tips for aligning the first row of a table with a line of text

I need assistance aligning the first row of a table with a line of text. Specifically, I am trying to achieve ** some text ** |first row of table      |             ...

What are some strategies to enhance the performance of JavaScript pagination to ensure it functions effectively for varying numbers of pages?

Currently, I am working on building Vanilla Javascript Pagination. I encountered an issue where the pagination seems to work flawlessly only when there are precisely 7 pages. If the page count exceeds or falls below 7, some minor bugs start to surface. I h ...

Attempting to adjust the width upon hovering with CSS

I have attempted this previously and cannot figure out why it is not functioning properly. I am attempting to do the following: http://jsfiddle.net/geometron/u3M6r/1/ <ul> <li><a href="content1.html"> Demo 1 </a></li> ...

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Currently, I am engaged in a project that was initiated with bootstrap version 4.3.1. I have a keen interest in both JavaScript and HTML coding. <a class="dropdown-item" href="{{ route('user.panel') }}"> User panel </a& ...

When adjusting the top margin of the main content in CSS, the fixed top navigation section's margin also decreases simultaneously with the main content

I am in the process of creating a basic static blog page using HTML5, SASS, and CSS. While working on the design, I utilized the 'nav' semantic element for a fixed top bar on the page that remains visible even when scrolling down. Additionally, ...

Obtain JSON information and insert it into an HTML element

I'm currently faced with an issue regarding JSON data (fetching and posting it). Below is the code I have used, but unfortunately it is not working and I am unsure why. Upon checking with Firebug, it indicates the response as: 200 OK sourceforge.net 1 ...

HTML div feedback container with directional pointer

I've been working on creating a comment box with an arrow using CSS, but I'm facing a particular challenge. My comment box has a white background, and in order to make it stand out, I need to add a border. However, I'm struggling with addin ...

Is there a way to prevent an external script from making changes to an inline style?

There is a mysterious script running on a page that seems to be controlling the height of an inline style. The source of this script modifying the height property is unknown. <div class="vgca-iframe-wrapper wpfa-initialized" style="heigh ...

What is the best way to update a specific column value in a table using AngularJS?

How can I achieve opening a specific row's text-area when clicking the "Add_Note" button inside a table column, without affecting all other rows? I want to show them using index value while using ng-repeat. var myApp = angular.module('myApp&ap ...

Interacting with HTML elements in Java programming

I am facing a challenging situation that requires some brainstorming. I would greatly appreciate any advice or guidance in the right direction. My goal is to incorporate a Google Map into my Java Swing project, with the map being specified as a URL wit ...

Ensuring smooth video playback on a website

My website is experiencing issues due to a large mov file that's 157 megabytes. When I try to run it on my page using a javascript scroller animation, the animation becomes choppy. Additionally, I used css to simulate a mask, but it doesn't get m ...

Tips for combining two htmlelements together

I have two HTML table classes that I refer to as htmlelement and I would like to combine them. This is similar to the following code snippet: var first = document.getElementsByClassName("firstclass") as HTMLCollectionOf<HTMLElement>; var se ...

"Trouble arose when I tried to incorporate additional functions into my JavaScript code; my prompt feature is not

As a beginner in HTML and JS coding, I am working on creating a page that prompts user input for a name and then executes animations using radio buttons. However, after adding functions for radio button changes, my prompt is no longer functioning properly. ...

Are there various types of HTML5 document declarations available?

Back in the days when I used to create web pages in XHTML, there were three types of doctype available - strict, transitional, and frameset. Are these different types of doctypes still present in HTML5? ...

Is there a method to uncover the code that controls the display of a <div> element?

As a fresh face at the company, I've been given the responsibility of developing a chart that is similar to one already present on their website. While I have the knowledge and skills to create it, I am struggling to locate the specific code where the ...

Tips on adjusting the default width of the React player interface

I'm currently utilizing react-player to display a video in my app. The default width it comes with is not responsive, and applying CSS didn't prove to be effective. import ReactPlayer from 'react-player'; <ReactPlayer url="https:// ...

Vertical Positioning of Tabs in Materialize CSS

My current challenge involves creating vertical tabs using materialize CSS, specifically in regards to positioning. The desired outcome is for the content to align at the same level when clicking on TAB 3. An example of the expected result can be seen in t ...

Is it possible to get this numeric input working properly? [HTML5]

How can I create a button that generates a random number between 0 and a specified value x when clicked? Currently, my implementation is returning NaN instead of the desired random number. function generateRandomNumber() { document.getElementById("num ...

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

What is the best way to showcase a variable from a switch statement on my ASP.NET web page?

Looking to format the month from a datetime object as text in this style: 01 Dec 2011 A switch statement was set up to determine the month and assign it to a variable for display on index.aspx. However, the code doesn't seem to be functioning as e ...