Skip to main content
A
aronce
Participant
August 1, 2020
Question

How to edit a rollover using a Dreamweaver function.

  • August 1, 2020
  • 3 replies
  • 531 views

Hello, I have a menu using the rollover behavior created using the insert rollover image dialog box. It works fine but now I want to change the rollover image. I cannot find an easy way to do that!  The only way I found is to delete and recreate the rollover, or to edit directly inside the code. A solution should be to modify the parameters of the onMouseOver behavior, but impossible to modify the onMouseOver behavior in the corresponding panel (double click on it has no effect) for example. Is existing a solution for that? Thank you 

This topic has been closed for replies.

3 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 1, 2020

Below is an example of a modern navigation menu that is mobile & tablet-friendly.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Navbar with Brand </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>

<body>
<nav class="navbar navbar-expand-md navbar-dark bg-secondary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynavbar" aria-controls="mynavbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<!--BRAND/LOGO here--> 
<a class="navbar-brand" href="#"><img src="https://dummyimage.com/300x65" alt="logo"></a>

<div class="collapse navbar-collapse justify-content-md-center" id="mynavbar">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="https://example.com" id="mydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">onClick Dropdown</a>
<div class="dropdown-menu" aria-labelledby="mydropdown"> <a class="dropdown-item" href="#">Something</a> <a class="dropdown-item" href="#">Another thing</a> <a class="dropdown-item" href="#">Some other things</a> </div>
</li>
</ul>
</div>
</nav>

<!--BEGIN PAGE CONTENT-->
<div class="container">
<div class="row">
<div class="col">
Page content goes here...

</div>
</div>
</div>


<!--Supporting scripts. First jQuery, then popper, then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

 

 

Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 1, 2020

    Image rollover behaviors don't DO anything on touch screens.  Most site visitors today are on mobile, tablet and hybrid devices that have no mouse.  No mouse = no rollovers.

     

    Nancy O'Shea— Product User & Community Expert
    A
    aronceAuthor
    Participant
    August 1, 2020

    Hello, thank you for your answer, of course, you are right but it is the case of an old web site. We have a project to rebuild the site, but currently, only small changes are requested like changing the color for the text/image for the rollover. 
    Alain

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 1, 2020

    Your rollover script appears to be inside a library item.   And CSS styled text is much better for web accessibility, search engines and language translators.   So I really think it's better to replace images and rollover scripts with real text links. 

     

    Step #1  Replace everything inside your Library Item with this markup.

    <table id="nav" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td width="38">&nbsp;</td>
<td width="124"><a href="index.html">Retour &agrave; l'accueil"</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="definition.html">La r&eacute;flexologie</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="origines.html">Les Origines de la R&eacute;flexologie</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="bienfaits.html">Les Bienfaits de la R&eacute;flexologie</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="seances.html">D&eacute;roulement d'une S&eacute;ance</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="activite.html">Description de mon activit&eacute;</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td height="15"></td>
<td><a href="tarifs.html" >Consultez les tarifs</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="temoignages.html">Quelques T&eacute;moignages</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td height="15"></td>
<td><a href="liens.html">Mes meilleurs liens</a></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="contact.php">Pour me joindre</a></td>
</tr>
</table>

     

    Step #2  Add the following CSS code to your document's <head> tag.

    <style>
#nav a {
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 12px;
text-decoration:none;
color:#FFF; 
background: teal;
padding:2%;
display:block;
text-align: center
}
#nav a:visited {color:silver}

#nav a:hover,
#nav a:active,
#nav a:focus {color:gold}
</style>

     

    Feel free to adjust styles and link text.

     

    Nancy O'Shea— Product User & Community Expert
      hans-g.
      hans-g.
      Legend
      August 1, 2020

      Hello,

      it could be helpful, if you send a link to your website in question.

      Hans-Günter

      A
      aronceAuthor
      Participant
      August 1, 2020

      Hello, thank you for your answer. Here is a link to the website : https://www.podozen.fr

      Alain

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices