Highlighted

How to edit a rollover using a Dreamweaver function.

New Here ,
Aug 01, 2020

Copy link to clipboard

Copied

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 

Topics

How to

Views

50

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

How to edit a rollover using a Dreamweaver function.

New Here ,
Aug 01, 2020

Copy link to clipboard

Copied

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 

Topics

How to

Views

51

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
Adobe Community Professional ,
Aug 01, 2020

Copy link to clipboard

Copied

Hello,

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

Hans-Günter

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...
New Here ,
Aug 01, 2020

Copy link to clipboard

Copied

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

Alain

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...
Adobe Community Professional ,
Aug 01, 2020

Copy link to clipboard

Copied

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, 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...
New Here ,
Aug 01, 2020

Copy link to clipboard

Copied

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

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...
Adobe Community Professional ,
Aug 01, 2020

Copy link to clipboard

Copied

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, 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...
Adobe Community Professional ,
Aug 01, 2020

Copy link to clipboard

Copied

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

Horizontal on medium & large devicesHorizontal on medium & large devices

Vertical on small devicesVertical on small devices

<!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, 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...