Highlighted

Need help creating a rollover image effect for Navbar

Community Beginner ,
Dec 17, 2017

Copy link to clipboard

Copied

Hi All,

Does anyone have any experience/knowledge of making an image appear when rolling over it with your curser?  This for a college course.

Thanks!

-KyleScreen Shot 2017-12-17 at 10.50.51 AM.png

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Home</title>

<link rel="stylesheet" href="css/bootstrap.css" type="text/css">

<link rel="stylesheet" href="styles.css" type="text/css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"

      rel="stylesheet">

</head>

<body id="The Newport Agency" data-spy="scroll" data-target=".navbar" data-offset="60">

<nav class="navbar navbar-default navbar-fixed-top">

  <div class="container">

    <div class="navbar-header"><i class="material-icons">directions_boat</i>

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

      <a class="navbar-brand" href="contact.html">The Newport Agency</a></div>

    <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav navbar-right">

        <li><a href="index.html">HOME</a></li>

        <li><a href="#about">ABOUT</a></li>

        <li><a href="#services">SERVICES</a></li>

        <li><a href="#portfolio">PORTFOLIO</a></li>

        <li><a href="#pricing">PRICING</a></li>

        <li><a href="#contact">CONTACT</a></li>

      </ul>

    </div>

  </div>

</nav>

<div class="container-fluid">

<div class="jumbotron"> 

    <h1>The Newport Agency</h1>

    <h2><b>A DIGITAL MARKETING DESIGN AGENCY<br>

    We love the Web and the work we do. We work closely with our clients to deliver the best possible solutions for their need</b></h2>

    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

  </div>

</div>

      <form>

    <div class="form-group">

      <label for="email">Email:</label>

      <input name="Latest Promo's & Specials" type="email" class="form-control" id="email" placeholder="Enter email" autocomplete="on">

    <button type="submit" class="btn btn-default">Submit</button></div></form>

<div class="container">

<div class="row">

  <div class="col-lg-6">

    <h1><b>About Us</b></h1>

    <h2>The Newport Agency was founded firstly on the principal of providing exceptional customer service.</h2>

    <br>

    <p>By placing client needs first, the majority of our work is based upon referalls. We strive for nothing short of success and pride ourselves by going beyond our clients expectations. </p>

    <br>

    <button class="btn btn-default btn-lg">Get in Touch</button>

  </div>

  <div class="col-lg-6"><a href="mailto:kyle@newportadagency.com"><img src="images/wrapper-img.gif" alt="The Newport Agency's Creative Genuis" width="550"></a></div>

<footer class="container-fluid text-center">

  <p>Footer Text</p>

</footer>

</body>

</html>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

The Bootstrap navbar doesn't support it.   Hover event triggers won't do anything on touch screen devices because they don't have a mouse.   Events are more often triggered by finger tap or mouse click.

For example, click a button and a modal window appears.

Bootstrap Modals

Or click a button and a collapsible div appears.

<h2>Simple Collapsible</h2>

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>

<div id="demo" class="collapse">

Lorem ipsum dolor sit amet, consectetur adipisicing elit,  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div>

TOPICS
Create menus in Dreamweaver, Create Slideshows in Dreamweaver, Dreamweaver | Mac OS issues, Learn Dreamweaver

Views

601

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need help creating a rollover image effect for Navbar

Community Beginner ,
Dec 17, 2017

Copy link to clipboard

Copied

Hi All,

Does anyone have any experience/knowledge of making an image appear when rolling over it with your curser?  This for a college course.

Thanks!

-KyleScreen Shot 2017-12-17 at 10.50.51 AM.png

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Home</title>

<link rel="stylesheet" href="css/bootstrap.css" type="text/css">

<link rel="stylesheet" href="styles.css" type="text/css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"

      rel="stylesheet">

</head>

<body id="The Newport Agency" data-spy="scroll" data-target=".navbar" data-offset="60">

<nav class="navbar navbar-default navbar-fixed-top">

  <div class="container">

    <div class="navbar-header"><i class="material-icons">directions_boat</i>

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

      <a class="navbar-brand" href="contact.html">The Newport Agency</a></div>

    <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav navbar-right">

        <li><a href="index.html">HOME</a></li>

        <li><a href="#about">ABOUT</a></li>

        <li><a href="#services">SERVICES</a></li>

        <li><a href="#portfolio">PORTFOLIO</a></li>

        <li><a href="#pricing">PRICING</a></li>

        <li><a href="#contact">CONTACT</a></li>

      </ul>

    </div>

  </div>

</nav>

<div class="container-fluid">

<div class="jumbotron"> 

    <h1>The Newport Agency</h1>

    <h2><b>A DIGITAL MARKETING DESIGN AGENCY<br>

    We love the Web and the work we do. We work closely with our clients to deliver the best possible solutions for their need</b></h2>

    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

  </div>

</div>

      <form>

    <div class="form-group">

      <label for="email">Email:</label>

      <input name="Latest Promo's & Specials" type="email" class="form-control" id="email" placeholder="Enter email" autocomplete="on">

    <button type="submit" class="btn btn-default">Submit</button></div></form>

<div class="container">

<div class="row">

  <div class="col-lg-6">

    <h1><b>About Us</b></h1>

    <h2>The Newport Agency was founded firstly on the principal of providing exceptional customer service.</h2>

    <br>

    <p>By placing client needs first, the majority of our work is based upon referalls. We strive for nothing short of success and pride ourselves by going beyond our clients expectations. </p>

    <br>

    <button class="btn btn-default btn-lg">Get in Touch</button>

  </div>

  <div class="col-lg-6"><a href="mailto:kyle@newportadagency.com"><img src="images/wrapper-img.gif" alt="The Newport Agency's Creative Genuis" width="550"></a></div>

<footer class="container-fluid text-center">

  <p>Footer Text</p>

</footer>

</body>

</html>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

The Bootstrap navbar doesn't support it.   Hover event triggers won't do anything on touch screen devices because they don't have a mouse.   Events are more often triggered by finger tap or mouse click.

For example, click a button and a modal window appears.

Bootstrap Modals

Or click a button and a collapsible div appears.

<h2>Simple Collapsible</h2>

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>

<div id="demo" class="collapse">

Lorem ipsum dolor sit amet, consectetur adipisicing elit,  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div>

TOPICS
Create menus in Dreamweaver, Create Slideshows in Dreamweaver, Dreamweaver | Mac OS issues, Learn Dreamweaver

Views

602

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 17, 2017 0
Adobe Community Professional ,
Dec 17, 2017

Copy link to clipboard

Copied

The Bootstrap navbar doesn't support it.   Hover event triggers won't do anything on touch screen devices because they don't have a mouse.   Events are more often triggered by finger tap or mouse click.

For example, click a button and a modal window appears.

Bootstrap Modals

Or click a button and a collapsible div appears.

<h2>Simple Collapsible</h2>

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>

<div id="demo" class="collapse">

Lorem ipsum dolor sit amet, consectetur adipisicing elit,  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 17, 2017 1
Community Beginner ,
Dec 17, 2017

Copy link to clipboard

Copied

I will look into this. I'm looking at "Adobe Ad-On's right now. 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 17, 2017 0